6 ms·
Show HN: Mermaid ASCII Diagrams
- ewalk153 2y agoThis would be great to build into project readme workflows.
- kitd 2y agoYou can already use Mermaid in GitHub markdown: https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams https://docs.github.com/en/get-started/writing-on-github/wor...
- dmonitor 2y agoGitLab as well https://handbook.gitlab.com/handbook/tools-and-tips/#using-mermaid https://handbook.gitlab.com/handbook/tools-and-tips/#using-m...
- mcraiha 2y agoAzure DevOps wiki also supports Mermaid https://learn.microsoft.com/en-us/azure/devops/project/wiki/markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page https://learn.microsoft.com/en-us/azure/devops/project/wiki/...
- edflsafoiewq 2y agoI don't like that it renders controls on top of the diagram.
- quuxplusone 2y agoSome 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 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 2y agoThanks 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 2y agoSame, I had no idea there were examples until I read this.
- lordswork 2y agoCounter-nit: I found the examples within a few seconds.
- octopusRex 2y agoI'm disappointed. I was actually expecting lovely ascii art pictures of mermaids.
- m4tthumphrey 2y ago[flagged]
- derfnugget 2y agoSame. This is more than a nit. It's pretty much a need.
- kleiba 2y agoHere you go: https://www.asciiart.eu/mythology/mermaids https://www.asciiart.eu/mythology/mermaids
- piedpiper99 2y agoI supposed it's good for basic usage. I just tried a more complex graph and it didn't render well.
- nunobrito 2y agoHey, 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 2y agoThanks for the kind words!
- jonahx 2y agoNice 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 2y agoThanks for the recommendation. I've added the "+" corners in v0.5.1.
- deleted 2y ago[deleted]
- airstrike 2y ago[flagged]
- deleted 2y ago[deleted]
- virtualritz 2y agoThis obviously needs a direct pipe into Svgbob! https://ivanceras.github.io/svgbob-editor/ https://ivanceras.github.io/svgbob-editor/
- pkaye 2y agoNeeds to have a '+' and the elbows and T intersections.
- smusamashah 2y agoThere are not many other ascii diagramming tools (ascii to diagram) Typogram https://code.sgo.to/typograms/#installation https://code.sgo.to/typograms/#installation Markdeep https://casual-effects.com/markdeep/ https://casual-effects.com/markdeep/ svg bob editors https://ivanceras.github.io/bob-editor/ https://ivanceras.github.io/bob-editor/ https://mbarkhau.github.io/asciigrid/ https://mbarkhau.github.io/asciigrid/ Ditaa https://ditaa.sourceforge.net/ https://ditaa.sourceforge.net/ Goat https://github.com/blampe/goat https://github.com/blampe/goat Protocol https://www.luismg.com/protocol/ https://www.luismg.com/protocol/ (dsl to ascii) https://diagon.arthursonzogni.com/#Sequence https://diagon.arthursonzogni.com/#Sequence https://textart.io/sequence https://textart.io/sequence https://weidagang.github.io/text-diagram/ https://weidagang.github.io/text-diagram/ https://diagwiz.io/playground/ https://diagwiz.io/playground/
- Myrmornis 2y agohttps://d2lang.com/ https://d2lang.com/ is really nice. Also I used to use https://swimlanes.io/ https://swimlanes.io/ before d2.
- everybodyknows 2y agoAlso, https://pikchr.org/ https://pikchr.org/
- everybodyknows 2y agoThere 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/lewish/asciiflow https://github.com/tbanel/uniline/ 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 2y agolove 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 2y agoThanks, that's a good suggestion. I'm also noticing that's not working as intended.
- AlexanderGrooff 2y agoFixed in 0.5.0. Give it a try!
- zczc 2y agoIn the same vein: https://plantuml.com/ascii-art https://plantuml.com/ascii-art
- tiagoafpereira 2y agoAlso: https://dot-to-ascii.ggerganov.com/ https://dot-to-ascii.ggerganov.com/
- PhilipRoman 2y agoI use https://metacpan.org/dist/Graph-Easy/view/bin/graph-easy 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 2y agoIn the age of AI someone automated Mentifex[1]! [1] https://nothingisreal.com/mentifex_faq.html https://nothingisreal.com/mentifex_faq.html
- girvo 2y agoHah 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 2y agoOut 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 2y agoI've used [mmdc](https://github.com/mermaid-js/mermaid-cli 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 2y agoThanks. 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 2y agoI use this for generating AWS deployment diagrams, which is kinda similar - https://github.com/mingrammer/diagrams https://github.com/mingrammer/diagrams
- flykespice 2y agoWow! this will come pretty in hand when building plaintext documentation using diagrams.
- prmoustache 2y agograph 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 https://mermaid.js.org/syntax/examples.html
- AlexanderGrooff 2y agoThe 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 2y agoYeah, first try I copy pasted the pie charts example wondering how it would render in ascii and was noooo
- Lorak_ 2y agoAre 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 2y agoYes, 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 https://github.com/AlexanderGrooff/mermaid-ascii
- ithkuil 2y agoIs 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?
- comebhack 2y agoI have been using Monodraw for a long time: https://monodraw.helftone.com/ 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.