mermaid VS C4-PlantUML

MermaidJS

Another solution which I prefer is - maintaining diagrams as code which live in the same repos as the code. There are many tools these days which help us author diagrams from code. My favorites are Mermaid and PlantUML. Now your code can live in the repo and evolve along with the codebase. You might need to do additional setup if you'd like the diagrams to be generated as part of your CI/CD. I like to maintain these in a /docs folder within the project repo.

Individual diagrams have their grammar in a .jison file.

Flowchart: https://github.com/mermaid-js/mermaid/blob/develop/packages/...

A single grammar to support all the different use cases would be challenging. But we did have some plans to introduce guidelines to make different diagram syntaxes more consistent.

This would really be a good UX improvement.

But the implementation might be a little tricky.

Please raise an issue so we can discuss further, and add it to roadmap if feasible.

https://github.com/mermaid-js/mermaid/issues/new

This is so cool. It reminds me of Markdown and Mermaid (https://github.com/mermaid-js/mermaid), which can do a similar thing within a plain text file. Keep it up; looking forward to trying it out.

KeenWrite[0], the FOSS Markdown text editor I’ve been working on, includes the ability to render plain text diagrams via Kroki[1]†. See the screenshots[2] for examples. Here’s a sample Markdown document that was typeset[3] using ConTeXt[4] (and an early version of the Solare[5] theme).

One reason I developed KeenWrite was to use variables inside of plain text diagrams. In the genealogy diagram, when any character name (that’s within the diagram) is updated, the diagram regenerates automatically. (The variables are defined in an external YAML file, allowing for integration with build pipelines.)

Version 3.x containerizes the typesetting system, which greatly simplifies the installation instructions that allow typesetting Markdown into PDF files. It also opens the door to moving Kroki into the container so that diagram descriptions aren’t pushed over the Internet to be rendered.

†Kroki, ergo KeenWrite, supports BlockDiag (BlockDiag, SeqDiag, ActDiag, NwDiag, PacketDiag, RackDiag), BPMN, Bytefield, C4 (with PlantUML), Ditaa, Erd, Excalidraw, GraphViz, Nomnoml, Pikchr, PlantUML, Structurizr, SvgBob, UMLet, Vega, Vega-Lite, and WaveDrom.

Note that Mermaid diagrams generate non-conforming SVG[6], so they don’t render outside of web browsers. There is work being done to address[7] this problem.

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

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

[2]: https://github.com/DaveJarvis/keenwrite/blob/main/docs/scree...

[3]: https://pdfhost.io/v/4FeAGGasj_SepiSolar_Highlevel_Software_...

[4]: https://wiki.contextgarden.net/Main_Page

[5]: https://github.com/DaveJarvis/keenwrite-themes/

[6]: https://github.com/mermaid-js/mermaid/issues/2485

[7]: https://github.com/yuzutech/kroki/issues/1410

Useful resources: GitHub repository Package size: 24.9 MB License: MIT

Or, this one: https://github.com/mermaid-js/mermaid

PlantUML + C4 plugin;

Yes. I use this all the time for software diagramming. With c4 model (https://github.com/plantuml-stdlib/C4-PlantUML) and AWS icons (https://github.com/awslabs/aws-icons-for-plantuml)

The C4 model (https://c4model.com/) is great for architecture diagrams. You can use different tools to generate them. Here are the ones I've been using:

- https://github.com/plantuml-stdlib/C4-PlantUML

3️⃣ Text-based diagramming- C4-PlantUML

> onboarding docs

yes, they're don't changing frequently

> system design docs

yes - see C4-PlantUML[1]

> meeting notes

no, unless they're directly code related like ADRs [2,3].

Although one can abuse Github Issues + comments for this, in my opinion it's better to use modern SaaS tools for this, i.e. Loom, Descript, Linear.app, etc. - you can automate this process, e.g. transcribe the meeting's recording and add the issue/repo using Github Actions.

--

[1] https://github.com/plantuml-stdlib/C4-PlantUML

[2] https://adr.github.io/

[3] https://docs.aws.amazon.com/prescriptive-guidance/latest/arc...

I use a combination of: * Markdown (for notes and code blocks) * Mermaid markdown (for architectural diagrams in markdown documents) * PlantUML markdown (again for arch. docs in markdown, but mainly for C4 diagrams) * a Docker container to render PlantUML markdown to images * Joplin, installed on every device I regularly use * NextCloud, to store, secure, encrypt, and make available everywhere, the markdown notes managed by Joplin

If you're interested in diagramming system architecture in a top-down fashion, I'll pile on another recommendation to check out the C4 model[0].

As others have mentioned, to effectively communicate a system you must limit the context to particular layers of abstraction, and C4 is a good approach to doing just that. There's also a C4 plugin for PlantUML[1].

But don't forget that, as with all visualizations, audience and purpose are key.

Consider whether you are addressing short-term needs (eg identifying inefficiencies, modeling for a client pitch) or long-term needs (eg knowledge retention, managing complexity). If your audience's needs are short-term, you can certainly get by with much simpler tools (eg Inkscape, excalidraw/draw.io/etc, picture of a whiteboard, doodles on a napkin).

Also consider whether or not you actually have a problem better served by bottom-up (ie generated) visualizations (eg ERDs for database schema refactoring, heatmaps for profiling, GraphViz for debugging DAGs).

[0] https://c4model.com/

[1] https://github.com/plantuml-stdlib/C4-PlantUML