208

Render Mermaid diagrams as SVGs or ASCII art

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.

an hour agosmilingleo

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.

15 minutes agotuetuopay

You can put ASCII diagrams in code comments.

Also Claude code in the terminal can show them.

16 minutes agogregoriol

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

5 hours agotempaccsoz5

Thanks for the credits!

2 hours agoAlexanderGrooff

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

4 hours agothangalin

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/

6 hours agojonfw

^Unicode.

5 hours agomixmastamyk

Importantly they also render in your source code. I love a good diagram at the top of a file.

4 hours agohahahahhaah

Only if you view your source with a monospace font, Grandad ;)

23 minutes agoxipix

Am I reading this right and it doesn’t need any DOM or browser engine at all? That would indeed be awesome.

30 minutes agorcarmo

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.

5 hours agorahimnathwani

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.

6 hours agoa_t48

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.

5 hours agocsmantle

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.

4 hours agoTerretta

Looks really useful to document complex applications, I will give it a try.

37 minutes agopeter_retief

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.

4 hours agonulone

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)

35 minutes agodizhn
[deleted]
4 hours ago

> Aesthetics — Might be personal preference, but wished they looked more professional

Im sold. Love mermaid but totally agree.

6 hours agojackconsidine

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.

5 hours agodoanbactam

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).

4 hours agopeanutz454

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.

3 hours agoLeonidBugaev
[deleted]
6 hours ago

How is the LaTeX compatibility? Base mermaid's LaTeX compatibility is quite sparse.

5 hours agowyes

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?
4 hours agoapwheele

This is great, I will definitely make use of this!

4 hours agolubujackson

[dead]