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.

https://ivanceras.github.io/svgbob-editor/

(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/

Also I used to use https://swimlanes.io/ before d2.

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.

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.

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

Small nit on layout: 90 degree joints should use "+" in the connecting lines, as they do in the boxes.

PS: it's open source so feel free to help out ;) https://github.com/AlexanderGrooff/mermaid-ascii

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

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.

ts-directed-graph outputs Mermaid :)

This tool seems way more useful for hand-made ones, definitely bookmarking

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.

[1] https://nothingisreal.com/mentifex_faq.html

One request: support for self-reference, i.e. "A --> A", "A --> A & B"

https://docs.github.com/en/get-started/writing-on-github/wor...

https://handbook.gitlab.com/handbook/tools-and-tips/#using-m...

         ┌──────────────┐
         │ It's 2024... │
         └───────┬──────┘
                 │
    ╔════════════╧═════════════╗
    ║    I wish box drawing    ║
    ║ characters were the norm ║
    ╚══════════════════════════╝