Comment by thangalin

16 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

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.

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)

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

  • 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?

    • Oh, you're right. I misunderstood. I think it was the comparison to mermaid that threw me, and then I checked out the examples