[HN Gopher] Show HN: Mermaid ASCII Diagrams
___________________________________________________________________
Show HN: Mermaid ASCII Diagrams
Author : AlexanderGrooff
Score : 221 points
Date : 2024-10-15 11:30 UTC (1 days ago)
(HTM) web link (mermaid-ascii.art)
(TXT) w3m dump (mermaid-ascii.art)
| ewalk153 wrote:
| This would be great to build into project readme workflows.
| kitd wrote:
| You can already use Mermaid in GitHub markdown:
|
| https://docs.github.com/en/get-started/writing-on-github/wor...
| dmonitor wrote:
| GitLab as well
|
| https://handbook.gitlab.com/handbook/tools-and-
| tips/#using-m...
| mcraiha wrote:
| Azure DevOps wiki also supports Mermaid
| https://learn.microsoft.com/en-
| us/azure/devops/project/wiki/...
| edflsafoiewq wrote:
| I don't like that it renders controls on top of the diagram.
| quuxplusone wrote:
| Some nits:
|
| The "Example" buttons don't jump out at me; I found them but it
| took a while. Also consider labeling them with their point, e.g.
| "Example 3: Color"
|
| If you change the input text to something well-formed, the graph
| seems to update immediately. But if you change it to something
| ill-formed, the graph doesn't update immediately -- and then if
| you click "Generate" manually, it blanks the input box. Either
| this is a bug, or the "Generate" button doesn't do what I think
| it does (i.e. generate output). Again, adding a noun to the verb
| might help. Or just adding some usage information somewhere on
| the page.
|
| For those like me who've never heard of "Mermaid," apparently
| it's like GraphViz's dot language but different.
| https://github.com/mermaid-js/mermaid I tried the flowchart
| example from Mermaid's own README, but it didn't come out right:
| looks like the shape characters [] and {} aren't handled.
| AlexanderGrooff wrote:
| Thanks for the feedback! I agree that the web UI can be
| improved (quite) a bit, most of my efforts went into the actual
| generation of the diagrams. I'll have a look at prettifying it.
| matt3210 wrote:
| Same, I had no idea there were examples until I read this.
| lordswork wrote:
| Counter-nit: I found the examples within a few seconds.
| brink wrote:
| Counter-counter-nit: I did not.
| wigster wrote:
| nor i
| octopusRex wrote:
| I'm disappointed. I was actually expecting lovely ascii art
| pictures of mermaids.
| derfnugget wrote:
| Same. This is more than a nit. It's pretty much a need.
| kleiba wrote:
| Here you go: https://www.asciiart.eu/mythology/mermaids
| piedpiper99 wrote:
| I supposed it's good for basic usage. I just tried a more complex
| graph and it didn't render well.
| nunobrito wrote:
| Hey, where are the mermaids?!?
|
| But now seriously.. the diagrams are working really well for
| simple examples, thank you so much for sharing this tool. I have
| bookmarked your page, my documentation is based on text files and
| often have to build these kind of diagrams too.
|
| The example buttons took me a while to be found, but are good for
| syntax explanation. Thank you for making this available.
| AlexanderGrooff wrote:
| Thanks for the kind words!
| jonahx wrote:
| Nice work, I love ascii diagrams. Especially useful when you want
| a visual explanation that can be embedded directly in source
| code.
|
| Small nit on layout: 90 degree joints should use "+" in the
| connecting lines, as they do in the boxes.
| AlexanderGrooff wrote:
| Thanks for the recommendation. I've added the "+" corners in
| v0.5.1.
| airstrike wrote:
| +--------------+ | It's 2024... |
| +-------+------+ |
| +------------+-------------+ | I wish box drawing |
| | characters were the norm | +--------------------------+
| virtualritz wrote:
| This obviously needs a direct pipe into Svgbob!
|
| https://ivanceras.github.io/svgbob-editor/
| pkaye wrote:
| Needs to have a '+' and the elbows and T intersections.
| smusamashah wrote:
| There are not many other ascii diagramming tools
|
| (ascii to diagram)
|
| Typogram https://code.sgo.to/typograms/#installation
|
| Markdeep https://casual-effects.com/markdeep/
|
| svg bob editors https://ivanceras.github.io/bob-editor/
| https://mbarkhau.github.io/asciigrid/
|
| Ditaa https://ditaa.sourceforge.net/
|
| Goat https://github.com/blampe/goat
|
| Protocol https://www.luismg.com/protocol/
|
| (dsl to ascii)
|
| https://diagon.arthursonzogni.com/#Sequence
|
| https://textart.io/sequence
|
| https://weidagang.github.io/text-diagram/
|
| https://diagwiz.io/playground/
| Myrmornis wrote:
| https://d2lang.com/ is really nice.
|
| Also I used to use https://swimlanes.io/ before d2.
| everybodyknows wrote:
| Also,
|
| https://pikchr.org/
| everybodyknows wrote:
| There is another, related class of tools, and that is
| graphical editors of the Unicode box-drawing characters:
|
| https://github.com/lewish/asciiflow
|
| https://github.com/tbanel/uniline/
|
| Or, less ergonomically, the general rectangle-editing
| commands built into more powerful code editors e.g. Emacs.
|
| With these, simple but fairly pretty box+line+text diagrams
| can be inlined with your source code comments. This
| unification may help in the perennial struggle to keep
| software architecture and source code reality in sync.
| nlake906 wrote:
| love it, will definitely be using it for sketching documentation
| in comments for SQL sprocs, etc.
|
| One request: support for self-reference, i.e. "A --> A", "A --> A
| & B"
| AlexanderGrooff wrote:
| Thanks, that's a good suggestion. I'm also noticing that's not
| working as intended.
| AlexanderGrooff wrote:
| Fixed in 0.5.0. Give it a try!
| zczc wrote:
| In the same vein: https://plantuml.com/ascii-art
| tiagoafpereira wrote:
| Also: https://dot-to-ascii.ggerganov.com/
| PhilipRoman wrote:
| I use https://metacpan.org/dist/Graph-Easy/view/bin/graph-easy
| There is a package perl-graph-easy for it in AUR (it's a
| command line frontend for the perl library)
| abraxas wrote:
| In the age of AI someone automated Mentifex[1]!
|
| [1] https://nothingisreal.com/mentifex_faq.html
| girvo wrote:
| Hah we rely on Mermaid a _heap_ at work for building internal
| dependency graphs from `yarn info` JSON data and a super lazy
| depth-first graph haha. Super useful, nice to see another
| renderer!
|
| ts-directed-graph outputs Mermaid :)
|
| This tool seems way more useful for hand-made ones, definitely
| bookmarking
| danpalmer wrote:
| Out of interest have you managed to get Mermaid graphs
| rendering outside of a browser?
|
| I was trying to do this a while back so I could do server side
| rendering of graphs, but it seemed to depend strongly on the
| presence of a DOM. Couldn't quite get it working with JS-DOM
| either.
| pjungwir wrote:
| I've used [mmdc](https://github.com/mermaid-js/mermaid-cli)
| to generate mermaid images from a Makefile. It looks like it
| is implemented with puppeteer, so perhaps it doesn't quite
| fit your request. But if you just want something you can use
| at the cli, it is great.
| danpalmer wrote:
| Thanks. You're right, unfortunately this doesn't fit my
| needs, but I can see how it would be fine for CLI and
| casual use cases.
| the_arun wrote:
| I use this for generating AWS deployment diagrams, which is kinda
| similar - https://github.com/mingrammer/diagrams
| flykespice wrote:
| Wow! this will come pretty in hand when building plaintext
| documentation using diagrams.
| prmoustache wrote:
| graph TD
|
| project is called Mermaid ASCII -->|expectation| It supports
| mermaidjs syntax
|
| It supports mermaidjs syntax -->|I tried| It doesn't
|
| It doesn't -->|conclusion| I am a bit bummed
|
| https://mermaid.js.org/syntax/examples.html
| AlexanderGrooff wrote:
| The example you post works just fine ;)
|
| On a serious note, yes not all syntax noted in the Mermaid docs
| work yet. I'm planning on adding more coverage of the Mermaid
| syntax over time. For now the basics work and (hopefully) shows
| its potential.
| prmoustache wrote:
| Yeah, first try I copy pasted the pie charts example
| wondering how it would render in ascii and was noooo
| Lorak_ wrote:
| Are you planning to support more of mermaids features? I tried
| one example where this could be useful to me - Mermaids gitGraph
| - and it looks like it's not supported.
| AlexanderGrooff wrote:
| Yes, over the course of time I want to increase the coverage of
| the Mermaid syntax.
|
| PS: it's open source so feel free to help out ;)
| https://github.com/AlexanderGrooff/mermaid-ascii
| ithkuil wrote:
| Is there something that can turn those ascii diagrams back into
| mermaid sources?
|
| I tried the first example with gpt-o1 and the result wasn't bad:
| graph LR A --> B --> D A --> C B --> C
| D --> C
|
| would a smaller model but fine tuned on many syntetic renderings
| do a better job?
| jcgrillo wrote:
| It would be pretty cool to be able to draw a flowchart or graph
| on a tablet and have it automatically turned into mermaid
| source. That's exceptional compression.
| comebhack wrote:
| I have been using Monodraw for a long time:
| https://monodraw.helftone.com/
|
| It's a macOS app and I've found it great. However if given an
| ASCII diagram, you cannot edit it with the same ease as creating
| a new one (e.g. reflowing text or resizing boxes).
|
| I really like the idea of having the mermaid source and the ASCII
| diagram together, so you could use the source to change the
| diagram if needed. But I feel that would feel cluttered to have
| both in a plain text file or comment, where ASCII diagrams shine.
___________________________________________________________________
(page generated 2024-10-16 23:02 UTC)