Skip to main content

Diagramming Tools

· 2 min read
Mariusz Galus
Mariusz Galus
King of the Palace

Over the years I have messed with tons of diagramming tools: dot with graphviz (see graphviz.vim), asciiflow, yEd, and draw.io.

Currently, my favorite workflow for making diagrams that will be published to places that matter is to use C4-PlantUML and VSCode's PlantUML extension for live-previews.

But here is a list of cool things I came across during my journey that Reddit user hugosenari found!

List of tools

I love plantuml, solves 90% of my problems, for orther 10%:

  • kroki.io (aggregator)
  • sketch.systems (state machine)
  • bpmn-sketch-miner.ai (BPMN)
  • coggle.it (mind map)
  • sketchplanations.com (should be out of this list but is nice anyway)

Reddit/hugosenari

Kroki

From this list I found a service that allows you to send your text-based-diagrams to their API and they will generate an SVG for you to use! Check out https://kroki.io

Instead of setting up a diagram development environment, you can just call their api's and dynamically generate diagrams. This is powerful because it can be abstracted to a point where even these blog posts could render UML with a simple plugin utilizing the Korki api. Sounds like a great plugin to make for Docusaurus.

Kroki GET Example​

Take your UML text and encode it with:

encode it for kroki get api
cat plantuml.puml | python -c "import sys; import base64; import zlib; print(base64.urlsafe_b64encode(zlib.compress(sys.stdin.read().encode('utf-8'), 9)).decode('ascii'))"
eNp9UkFuwjAQvOcVW05Uopz6AErEgQMVKvQcGbNJLBwbeTeC_r4b40AQtLd4PDszO86MWAVuG5u9GKdtu0fI34vcO8YzT4_dRcaGLcLmhxgbSFewN6oKqoHSB1gKFBwyzJU7GFclbpatMZB3Y90S-wbDBEY9I0_QSLAP6AngS-AaYSesCZwM13CMEspGDJTWvnVM09FrdjEZ7y6KBcWjyP2RJjpZ6090tSNgD7pGfehcTbiTT_rF4szjRhl7M1i8dWegq-xWIpvoKjlXRgdPvmRYnHWtXIWAw4Fb9F7alVIkis6q_34SfcM-IIGyti9JCwBpe7GXh2gUG-9i-C-0g9ofOvomJKEJq5grfRhQ71fdoNtTyt-1lWY-0VT1zoeH8v-ZjkustuuLxLPJaw8p3UzG5Qf8BSot7V4\=

Then you call the kroki api

kroki api call
curl https://kroki.io/c4plantuml/svg/eNp9UkFuwjAQvOcVW05Uopz6AErEgQMVKvQcGbNJLBwbeTeC_r4b40AQtLd4PDszO86MWAVuG5u9GKdtu0fI34vcO8YzT4_dRcaGLcLmhxgbSFewN6oKqoHSB1gKFBwyzJU7GFclbpatMZB3Y90S-wbDBEY9I0_QSLAP6AngS-AaYSesCZwM13CMEspGDJTWvnVM09FrdjEZ7y6KBcWjyP2RJjpZ6090tSNgD7pGfehcTbiTT_rF4szjRhl7M1i8dWegq-xWIpvoKjlXRgdPvmRYnHWtXIWAw4Fb9F7alVIkis6q_34SfcM-IIGyti9JCwBpe7GXh2gUG-9i-C-0g9ofOvomJKEJq5grfRhQ71fdoNtTyt-1lWY-0VT1zoeH8v-ZjkustuuLxLPJaw8p3UzG5Qf8BSot7V4\= > some.svg

Then you get this:

some.svg

Kroki has support for many different languages! What are you waiting for? Go use it.