NHacker Next
  • new
  • past
  • show
  • ask
  • show
  • jobs
  • submit
Mermaid ASCII: Render Mermaid diagrams in your terminal (mermaid-ascii.art)
tempaccsoz5 16 hours ago [-]
The actual Mermaid ASCII renderer is from another project [0]. This project transliterated it to typescript and added their own theming.

[0]: https://github.com/AlexanderGrooff/mermaid-ascii

forgotpwd16 7 hours ago [-]
Meanwhile they could've just bundled mermaid-ascii and run it on wasm. But then again probably took Claude less than an hour to port this to TS. The main algorithms are 1:1 conversion.

https://github.com/AlexanderGrooff/mermaid-ascii/blob/master...

https://github.com/lukilabs/beautiful-mermaid/blob/main/src/...

dang 2 hours ago [-]
Yikes, good catch. I've changed the link above to the original project now. (Edit: actually, let's use the project home page and put the Github repo in the toptext.)

(Submitted link was https://github.com/lukilabs/beautiful-mermaid. mellosouls is a good HN contributor so I'm sure this was well-intentioned.)

AlexanderGrooff 59 minutes ago [-]
I appreciate your comment, but I made mermaid-ascii OSS under MIT license so that everybody can use it in whatever fashion they like, be that in another OSS project or in your company. I’m just happy to contribute back to the ecosystem, and I’m excited seeing my projects being used by others.

Nothing but good vibes to these guys. Let’s all strive to keep making cool things, and leave things a little better than how you found it ;)

AlexanderGrooff 14 hours ago [-]
Thanks for the credits!
adiian 7 hours ago [-]
pancsta 5 hours ago [-]
And its in Go, so no package management joke involved. I will integrate it into my debugger, thx for the link!
falloutx 56 minutes ago [-]
Just another AI copies the entire project and you get to put your name on it.
dmos62 10 hours ago [-]
Really cool. Alexander Grooff (this is based on his go library [0]) did a great job.

[0]: https://github.com/AlexanderGrooff/mermaid-ascii

I think I ran into a bug, the "start" edge is not rendered. This is from https://agents.craft.do/mermaid:

    stateDiagram-v2
      [*] --> Idle
      Idle --> Active : start
      Active --> Idle : cancel
      Active --> Done : complete
      Done --> [*]

    ┌──────────┐
    │          │
    │          │
    │          │
    └─────┬────┘
          │     
          │     
          │     
          │     
          ▼     
    ┌──────────┐
    │          │
    │   Idle   │
    │          │
    └─────┬────┘
          ▲     
          │     
      cancel   
          │     
          ▼     
    ┌─────┴────┐
    │          │
    │  Active  │
    │          │
    └─────┬────┘
          │     
          │     
      complete  
          │     
          ▼     
    ┌──────────┐
    │          │
    │   Done   │
    │          │
    └─────┬────┘
          │     
          │     
          │     
          │     
          ▼     
    ┌──────────┐
    │          │
    │          │
    │          │
    └──────────┘
thangalin 15 hours ago [-]
While Mermaid gets the limelight, Kroki[1] offers: BlockDiag, BPMN, Bytefield, SeqDiag, ActDiag, NwDiag, PacketDiag, RackDiag, C4 with PlantUML, D2, DBML, Ditaa, Erd, Excalidraw, GraphViz, Nomnoml, Pikchr, PlantUML, Structurizr, Svgbob, Symbolator, TikZ, Vega, Vega-Lite, WaveDrom, WireViz, and Mermaid.

My Markdown editor, KeenWrite[2], integrates Kroki as a service. This means whenever a new text-based diagram format is offered by Kroki, it is available to KeenWrite, dynamically. The tutorial[3] shows how it works. (Aside, variables within diagrams are also possible, shown at the end.)

Note that Mermaid diagrams cannot be rendered by most libraries[4] due to its inclusion of <foreignObject>, which is browser-dependent.

[1]: https://kroki.io/

[2]: https://keenwrite.com/

[3]: https://www.youtube.com/watch?v=vIp8spwykZY

[4]: https://github.com/orgs/mermaid-js/discussions/7085

idoubtit 1 hours ago [-]
Comparing MermaidJS with Kroki is a bit like comparing PDF.js to Adobe Acrobat. I don't think either is better than the other, they're just for different use-cases.

With MermaidJS, converting a diagram inside a web page requires adding a handful of lines to a HTML page. The execution is fast and local.

Kroki is a web-service. To use it in a web page means adding a dependency to an external provider (a free service exists, but asks for fundings). An alternative is self-hosting by running a Kroki container.

A few years ago, I added Mermaid diagrams to a project in a few minutes of work. Had we needed a much more complex tool, maybe I would have gone with Kroki, but not by myself; it would have required a change in the deploying process of the project.

ycombiredd 6 hours ago [-]
Tangentially related, I once wanted to render a NetworkX DAG in ASCII, and created phart to do so.

There's an example of a fairly complicated graph of chess grandmaster PGM taken from a matplotlib example from the NetworkX documentation website, among some more trivial output examples in the README at https://github.com/scottvr/phart/blob/main/README.md#example...

(You will need to expand the examples by tapping/clicking on the rightward-facing triangle under "Examples", so that it rotates to downward facing and the hidden content section is displayed)

afro88 11 hours ago [-]
Edit: See child comments, I misunderstood. Original post below anyway.

--

To me, the diagrams have an uglier default design. A crazy amount of dropdown shadow (in the examples), stretched fonts (front page example). It doesn't matter how many diagram types you support if the generated diagrams aren't good quality.

Mermaids defaults are good enough. They're not amazing, but I'm also not embarrassed to show them to other engineers, stakeholders etc

Edit: KeenWrite looks excellent btw

jbstack 9 hours ago [-]
Maybe I've misunderstood, but isn't the whole point that it outputs to those other formats? So if you like the way Mermaid outputs look, you'd just output to that?
afro88 9 hours ago [-]
Oh, you're right. I misunderstood. I think it was the comparison to mermaid that threw me, and then I checked out the examples
smilingleo 13 hours ago [-]
I’m not entirely sure why there’s a push toward ASCII diagrams (perhaps influenced by AI usage). Mermaid and PlantUML are already text-based representations, and what most users actually want is a rendered diagram in a standard, widely recognized notation—primarily for humans, not machines.

ASCII diagrams are inherently constrained by printable characters, which makes them hard to standardize and limits their expressiveness compared to proper diagram renderers.

benrutter 11 hours ago [-]
I think context matters, often I might be writing docs in a text format that doesn't support mermaid (some readmes for instance, or a print put in a CLI tool) and want diagrams.

In those contexts, rendered mermaid as html isn't an option, so this really does seem like one of the best calls for human readability.

gregoriol 12 hours ago [-]
You can put ASCII diagrams in code comments.

Also Claude code in the terminal can show them.

12 hours ago [-]
jbstack 10 hours ago [-]
What you mean is that you don't find ASCII diagrams useful. Other people do (see other comments). I find them useful for Org Mode where I prefer to work with just text instead of having to keep separate image files together with my .org files. They're also easier to work with if you need to check them into a Git repo and you don't want to be bothered with something like Git LFS or git-annex. The fact that there are people who want them is enough to explain "why there's a push toward" them (assuming there is actually such a push).
dmos62 10 hours ago [-]
A lot of people primarily use markdown and command-line, and, importantly, so do many coding agents (which seems to be the authors' primary use case).
esafak 6 hours ago [-]
GFM supports Mermaid.
tuetuopay 12 hours ago [-]
They don't need a renderer, so they can be embedded in source code comments, or in markdown document without requiring e.g. Gitlab to properly render the document. And even then, they're still "rendered" when editing said markdown document.
javier_e06 43 minutes ago [-]
I love this project! I am minimalist web-gui averse being embedded dev and all my documentation is plain ascii. This tool will prove useful for posterity. Thanks!
jonfw 18 hours ago [-]
I love ASCII diagrams! The fact that I can write a diagram that looks equally wonderful in my terminal via cat as it does rendered on my website is incredible.

A good monospaced font and they can look really sharp!

I will definitely give this tool a shot.

I will also shout out monodraw as a really nice little application for building generic ASCII diagrams- https://monodraw.helftone.com/

mixmastamyk 17 hours ago [-]
^Unicode.
hahahahhaah 16 hours ago [-]
Importantly they also render in your source code. I love a good diagram at the top of a file.
12 hours ago [-]
btucker 3 hours ago [-]
I've been working on https://github.com/btucker/selkie which is a complete implementation of the Mermaid parser & renderer in rust as an experiment in what's possible with Claude Code. It's still rough around the edges, but I've been blown away by what's been possible. (I'm now using it as a test repo for https://github.com/btucker/midtown)

Playground here: https://btucker.github.io/selkie/

One of the cool features is it can use kitty to output diagrams direct to the terminal (if kitty is supported like in ghostty).

I'm planning to blog about the whole process soon.

joopie 2 hours ago [-]
This is a really cool project, and incredible traction - great job! I can see how this would work well with Claude Code to quickly explain what's going on.

I've worked on a similar project, but instead of going the ASCII route, we decided to lean into interactivity for code exploration. The angle is more around empowering human understanding, instead of agent understanding. We also chose D2 (and are looking to support Mermaid soon too).

Would love to hear others' thoughts on whether interactivity for humans is more valuable vs context for agents.

https://github.com/unslop-xyz/noodles

a_t48 17 hours ago [-]
The live demo requires some download of an AI agent platform? I'd really like to try this but not if that's what's required.
csmantle 17 hours ago [-]
The devs should really setup a client-only GitHub Pages for an accessible demo. Judging from skimming the project itself, it's definitely doable without locking into their platform.
dang 1 hours ago [-]
Related:

Show HN: Mermaid ASCII Diagrams - https://news.ycombinator.com/item?id=41847407 - Oct 2024 (50 comments)

rahimnathwani 17 hours ago [-]
Wow! It has this:

  Subgraph Direction Override: Using direction LR inside a subgraph while the outer graph flows TD.
With this, you should be able to approximate swim lane diagrams, which is something Mermaid lacks.

The last time I checked, Mermaid couldn't render subgraphs in a different direction than the overall graph.

smusamashah 15 hours ago [-]
Also see https://arthursonzogni.com/Diagon for text to ascii.

I have a list of text to diagram tools here https://xosh.org/text-to-diagram/ but not many are text to ascii. There are a few text to ascii sequence diagram tools.

brumar 12 hours ago [-]
Great list, thank you!
hbcondo714 2 hours ago [-]
Nice! Mermaid diagrams show up as their source code in Github Pages so perhaps this can be resolved now

https://github.com/orgs/community/discussions/65040

noisy_boy 2 hours ago [-]
I really tried to like Mermaid but the difficulty in styling gets tiring after a while. Went back to trusty .puml for sequence diagrams - much more expressive when it comes to styling.
tracker1 4 hours ago [-]
While a bit nifty to have this available in the TS/JS ecosystem for web usage... I'm not sure it'd be my first thing if I were using such a thing as a CLI.

Adjacent... I am somewhat curious if a well crafted rust library/app might work better via WASM since it's a relatively simple input/output scenario... I've done similar for input sanitization tasks in the past and it worked better than JS/TS.

tnkuehne 4 hours ago [-]
Quite nice for cloudflare workers as they don’t have access to DOM
robin_reala 11 hours ago [-]
Note that by doing ASCII you’re sacrificing possible accessibility; WCAG 1.0 specifically called ASCII images out as a problem in 1999.

(Mermaid isn’t accessible by default either, but there’s current work in that direction: https://github.com/mermaid-js/mermaid/pull/7349)

ozim 10 hours ago [-]
Just imagined what a garbage would screen reader spit out.
Terretta 16 hours ago [-]
If you like Obsidian.md but can't quite recommend it for less technical folks, these devs' Craft notes spaces are a great alternative:

https://www.craft.do/

While great for individuals, it's particularly strong out-of-the-box for teams, or even teams of teams with two levels of grouping.

They bring the same ... craft (ahem) ... to the whole product as shown in their Craft Agents or this renderer, with a strong foundation originally started in the Markdown philosophy. Check out the founder's story on their About page for a refreshingly LLM-free backgrounder.

intellectronica 4 hours ago [-]
dleeftink 17 hours ago [-]
Pair this with Unicode plots[0] and you're set!

[0]: https://github.com/JuliaPlots/UnicodePlots.jl

jackconsidine 17 hours ago [-]
> Aesthetics — Might be personal preference, but wished they looked more professional

Im sold. Love mermaid but totally agree.

lasgawe 2 hours ago [-]
nice project. previously, I used other tools to draw diagrams manually when I needed to add them to source code comments. You solved a big problem. I really appreciate it.
reboot7417 13 hours ago [-]
Looks awesome, perfect for a feature request for CC [0] I opened a while back.

[0]: https://github.com/anthropics/claude-code/issues/14375

nulone 16 hours ago [-]
The ASCII output is the missing piece for AI-assisted coding workflows. LLMs can spit out Mermaid, but you can't see the diagram inline in a terminal/code-review context. This fixes that.
dizhn 12 hours ago [-]
When I needed to see mermaid diagrams rendered the other day I realized my existing Forgejo instance already supported it so that's what I've been doing. Push to repo and check it out there. Not inline but not a bad place for code reviews. (I am sure all the other forges also support it)
15 hours ago [-]
mjaniczek 8 hours ago [-]
It seems like the ASCII/Unicode mode doesn't work all that well: https://agents.craft.do/mermaid#sample-6
rcarmo 12 hours ago [-]
Am I reading this right and it doesn’t need any DOM or browser engine at all? That would indeed be awesome.
Lio 7 hours ago [-]
I love Mermaid and Markdown as a combination for documentation.

I wonder if we can get the ASCII render to run inside Vim/NeoVim?

doanbactam 16 hours ago [-]
I've had issues with other CLI wrappers there. ASCII output is a nice touch for including diagrams directly in code comments without breaking formatting. Does it handle large graphs well, or does the text wrap get messy? We tried using `graph-easy` for this before but the syntax was annoying. 6.
LeonidBugaev 15 hours ago [-]
Nice one! I had my own spin on this issue as well, but from the other angle https://github.com/probelabs/maid

Getting AI to generate valid mermaid diagrams on scale extremely hard. With maid i'm hitting 100% accuracy.

Maid is basically built from scratch mermaid parser, without any dependnecies, which knows how to auto-fix common AI slop diagramming issues.

peanutz454 16 hours ago [-]
I get a sense of deja vu. There was another such project posted within the last 3 months, and another within last 6 months. I should have bookmarked them, because at least one of them was an open library (I think).
peter_retief 12 hours ago [-]
Looks really useful to document complex applications, I will give it a try.
dochtman 11 hours ago [-]
17 hours ago [-]
wyes 17 hours ago [-]
How is the LaTeX compatibility? Base mermaid's LaTeX compatibility is quite sparse.
altano 12 hours ago [-]
Who’s going to make the rehype plugin?
lubujackson 16 hours ago [-]
This is great, I will definitely make use of this!
apwheele 15 hours ago [-]
In the live demo, I am confused about some of the ascii renderings. (Unless I am missing something, they appear incorrect/inconsistent with the SVG.), https://agents.craft.do/mermaid

So for the "All Edge styles"

    graph TD
      A[Source] -->|solid| B[Target 1]
      A -.->|dotted| C[Target 2]
      A ==>|thick| D[Target 3]
Results in the ascii

    ┌──────────┐                                     
    │          │                                     
    │  Source  ├─thickted─────┐                      
    │          │        │     │                      
    └─────┬────┘        └─────┼────────────────┐     
          │                   │                │     
          │                   │                │     
        solid                 │                │     
          │                   │                │     
          ▼                   ▼                ▼     
    ┌──────────┐        ┌──────────┐     ┌──────────┐
    │          │        │          │     │          │
    │ Target 1 │        │ Target 2 │     │ Target 3 │
    │          │        │          │     │          │
    └──────────┘        └──────────┘     └──────────┘
(The svg for this example is maybe misleading, as it looks like un upside down T) But the ascii here has the overlapping words, and you cannot tell the difference in any of the lines.

The Parallel links, example mermaid

    graph TD
      A[Input] & B[Config] --> C[Processor]
      C --> D[Output] & E[Log]
results in ascii

    ┌───────────┐     ┌────────┐
    │           │     │        │
    │   Input   │     │ Config │
    │           │     │        │
    └─────┬─────┘     └────┬───┘
          │                │    
          │                │    
          │                │    
          │                │    
          ▼                │    
    ┌───────────┐          │    
    │           │          │    
    │ Processor ├◄─────────┤    
    │           │          │    
    └─────┬─────┘          │    
          │                │    
          │                │    
          │                │    
          │                │    
          ▼                ▼    
    ┌───────────┐     ┌────────┐
    │           │     │        │
    │   Output  │     │  Log   │
    │           │     │        │
    └───────────┘     └────────┘
This is just wrong isn't it? Why is there an arrow from config to log?
wrboyce 11 hours ago [-]
The latter one is a rendering issue I think, the right hand side of Processor is being used as an input from Config and an output to Log but the arrows overlap and become ambiguous.
cjlm 17 hours ago [-]
See also graph-easy.online (https://github.com/cjlm/graph-easy-online)
patrick4urcloud 10 hours ago [-]
very good job nice. i will give a try !
maximgeorge 14 hours ago [-]
[dead]
Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact
Rendered at 20:14:15 GMT+0000 (Coordinated Universal Time) with Vercel.