Diagramming

1

PlantUML and Mermaid: Code Your Way to Professional Diagrams, Say Goodbye to Drag-and-Drop

9 minute

Automatically generate sequence diagrams, class diagrams, state diagrams, and more. Escape the pain of manual layout and focus your time where it matters.

PlantUML offers rich syntax, perfect for complex, professional diagrams. Mermaid, on the other hand, is lightweight (no installation needed) and ideal for simpler diagrams within Markdown documents.

Installation and Configuration

PlantUML

  1. Install dependencies.
    sudo apt install default-jre graphviz
  2. Download the GPL version (full-featured) JAR package from the official download page.
  3. Start a local server for VS Code to render diagrams in real-time.
    java -jar plantuml.jar -picoweb:8000:127.0.0.1
  4. Install the jebbs.plantuml extension in VS Code. Afterward, set plantuml:Render to Local and plantuml:Server to http://127.0.0.1:8000/ in the settings.

Mermaid

Simply install the Markdown Preview Mermaid Support extension to enable real-time rendering in VS Code.

Read More