PlantUML is used to draw UML diagrams, using a simple and human readable text description. node_modules/.bin/mmdc -i $mmd -o $.pngĪlternatively you can use node_modules/mermaid/bin/mermaid.js $mmd where mmd is the mermaid file. You can use mermaid.cli tool which takes a mermaid definition file as input and generates svg/png/pdf file as output. To use mermaid diagrams it's useful to export them to PNGs.

mermaid in VS Code with Mermaid preview Generating PNG images from mermaid definitions To preview mermaid definition in VS Code with Mermaid Preview press Cmd-P to open Command palette and select Preview Mermaid Diagram. mermaid in VS Code with Markdown Preview Enhanced

To preview mermaid definition in VS Code with Markdown Preview Enhanced press Cmd-P to open Command palette and select Markdown Preview Enhanced: Open Preview. There's also dedicated preview plugins for VS Code and Atom. Markdown Preview Enhanced for Atom and VS Code can render mermaid and PlantUML.

You can write mermaid diagrams in text editor but it's better to use some editor with plugins to preview your work. Mermaid is a simple markdown-like script language for generating charts from text via javascript. 'Generation of diagrams and flowcharts from text in a similar manner as markdown.' One crafty tool is Draw.io with web and desktop editors but what to use if you want to write documentation as a code and see the changes clearly in text format and maintain source-controlled diagrams? One of the tools for drawing diagrams with human readable text are mermaid and PlantUML. Writing documentation is always a task which isn't much liked and especially with diagrams and flowcharts there's the problem of which tools to use.

Plantuml sequence diagram online