Mermaid VS kroki

Mermaid JS is a tool that lets you create diagrams and charts such as flowcharts, sequence diagrams, Gantt charts using simple text commands. It works by converting your text commands into a graphical representation that you can customize and share. https://mermaid.live/

I'm not OP, but I just ask GPT to turn code or process or whatever else into a mermaid diagram. Most of the time I don't even need to few-shot prompt it with examples. Then you dump the resulting text into something like https://mermaid.live/ and voilà.

I like excalidraw for live discussions but if I want to make more detailed or better looking diagrams, I really enjoy these two tools:

- For drag-and-drop/WYSIWYG, I really like DrawIO. They have a web version https://app.diagrams.net/ but I strongly recommend the desktop version https://github.com/jgraph/drawio-desktop/releases/

- For text-as-diagram, I think Mermaid wins this by default since GitHub added markdown support for these: https://mermaid.live/ (This was github's announcement https://github.blog/2022-02-14-include-diagrams-markdown-fil... )

After hours without being able to solve this problem, I decided to make the chart directly in Mermaid's live editor and export it to PNG and SVG. The big problem is that the letters are still too small, the quality of the PNG is very low, and the SVG only works on the web, not with other applications like PowerPoint and Inkscape.

You can export to PNG and other formats in the Mermaid editor https://mermaid.live/

Copy paste code here: https://mermaid.live

Your wish showing up in the face of a submission just 14 days ago and then another 29 days ago must be indicative of why there are so many dupes all the time: https://news.ycombinator.com/from?site=kroki.io

You can feel free to submit the GH repo, as that one doesn't seem to have been submitted before https://github.com/yuzutech/kroki

Pikchr https://pikchr.org/home/pikchrshow is the other general purpose one and older than d2. It is "Source-Code License: 0-clause BSD" as it says on the page.

Someone made it into wasm and put playground for pikchr here https://www.jakethaw.com/pikchr_webassembly_demo/

Can also try pikchr online here on https://kroki.io/#try which is hosting many other text to diagram tools as well.

I use mermaid.js heavily, but plug for Kroki:

https://kroki.io/

“Kroki provides a unified API with support for BlockDiag (BlockDiag, SeqDiag, ActDiag, NwDiag, PacketDiag, RackDiag), BPMN, Bytefield, C4 (with PlantUML), D2, DBML, Ditaa, Erd, Excalidraw, GraphViz, Mermaid, Nomnoml, Pikchr, PlantUML, Structurizr, SvgBob, Symbolator, TikZ, UMLet, Vega, Vega-Lite, WaveDrom, WireViz... and more to come!”

If you don't mind my asking, what aspects of "acceptable layout" is usually the first to get busted?

I'm extremely excited about using WireViz[1] to automate wiring harness diagram creation, and if I can, I'd like to know the speedbumps before I hit them. I'm thinkin generous linking between diagrams will be one path.

[1] Project:: https://github.com/wireviz/WireViz SandboxP:: https://kroki.io/#try [select Diagram>WireViz]

The SVG output is embedded into the PDF file.

https://kroki.io/examples.html#mind-map

Kroki has other text-based formats for flow charts, Gantt charts, UML diagrams, packet diagrams, network diagrams, word clouds, etc.

My cross-platform desktop text editor, KeenWrite, allows users to define variables in an external YAML file. The editor calls out to Kroki[1] to convert text-based diagrams to SVG. The diagrams can reference variables and are rendered using EchoSVG[2].

KeenWrite[3] can produce PDF documentation from Markdown documents that has PlantUML diagrams with elements stored in an external, machine-readable file. Here are screenshots showing variables on the left, diagram text in the middle, and a real-time render on the right:

* https://raw.githubusercontent.com/DaveJarvis/KeenWrite/main/...

* https://raw.githubusercontent.com/DaveJarvis/KeenWrite/main/...

KeenWrite supports all diagrams offered by Kroki, which includes "diagram-plantuml".

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

[2]: https://github.com/css4j/echosvg/

[3]: https://github.com/DaveJarvis/keenwrite