Generate diagrams from code

draw.io 21 Oct 2022

Share:

Documenting software costs developers time and becomes outdated quickly. A code-first diagramming approach - describing the diagram in code or text while programming - works well for entity models (SQL database code), and class descriptions (PlantUML and Mermaid syntax).
An example sequence diagram inserted from Mermaid code

Use our built-in advanced tools to generate a diagram or diagram components automatically.

Disclaimer: We’ve linked a number of open source projects and tools below. We don’t endorse these tools specifically, but want to highlight that useful code generation tools are readily available.

Tip: To modify an existing SVG ‘shape’ generated from PlantUML, Mermaid, or text, double-click on it to open the Insert dialog.


Entity shapes from SQL database code

Insert SQL code to document your existing databases quickly and easily in diagrams.net. Each database entity is rendered in an entity shape, rather than an SVG representation of the entire diagram.

  1. Click Arrange > Insert > Advanced > SQL.
    Insert SQL code then click Insert to create an ER diagram automatically
  2. Paste or write the SQL code for the entities in your database in the text field.
  3. Click Insert to generate a diagram, and it will be inserted as a ‘shape’ on the drawing canvas.

Entity shapes are automatically created based on your SQL code

Now, draw the relationship connectors between the entities as needed.

To recreate the entities, you’ll need to delete the existing entities and their connectors first, then insert the new SQL code.


Software diagrams from PlantUML

PlantUML is a syntax for drawing UML diagrams from plain text descriptions. PlantUML functionality in only available in online versions of draw.io, not draw.io Desktop or draw.io for Confluence/Jira DC, for example.

  1. Click Arrange > Insert > Advanced > PlantUML.
    Generate a mindmap from text in draw.io by inserting PlantUML in arithmetic notation via Arrange > Insert > Advanced > PlantUML
  2. Paste or write the PlantUML description of your diagram in the text field.
  3. Click Insert to generate a diagram, and it will be inserted as a ‘shape’ on the drawing canvas.

PlantUML can describe other types of diagrams, such as mindmaps as in the example above, and simple flow charts, but it’s predominantly used to document software systems.

UML class, use case, object, activity, component, deployment, sequence, state and timing diagrams can all be created using PlantUML.

The Reconnecting sub-state diagram converted into text with PlantUML and a diagram generated automatically in draw.io

Code ➞ PlantUML text

Some programming languages have tools to automatically generate the PlantUML syntax using code inspection (or reflexion). Use these tools to automatically document class hierarchies with inheritance, dependencies and aggregation. Some examples include those that parse C++ header files, Python source code, and Java code using Javadoc.

Take the generated PlantUML description of the code and insert it into a .drawio diagram. Then save and embed the diagram in GitHub, GitLab, Confluence/Jira, or wherever you want to document your software.

PlantUML text ➞ Code

There are also a variety of tools available that take PlantUML and turn it into code in a specific programming language, such as this plantuml-code-generator.


Diagrams from Mermaid syntax

Mermaid is younger than PlantUML and can describe a wider range of diagrams, not just UML. Its Markdown-like syntax is very easy to write and supported by several popular platforms.

  1. Click Arrange > Insert > Advanced > Mermaid.
    Paste the text in Mermaid syntax, then click Insert
  2. Add the Mermaid syntax description in the large text field.
  3. Click Insert and the diagram will be generated and added as a ‘shape’ on the drawing canvas.

A flow chart example from Mermaid syntax

GitLab and GitHub both support Mermaid natively in their Markdown renderer when you use the mermaid tag. Notion supports Mermaid syntax, rendering it as a diagram on the page.

If you want to use a Mermaid diagram as a component of a larger diagram, or embed it on another platform, insert the Mermaid syntax into a .drawio file.

Use a draw.io diagram with Mermaid syntax to …

An example Gantt chart inserted from Mermaid code

Tip: Embed any type of .drawio diagram in a GitHub Markdown page - you aren’t limited to Mermaid diagrams.
Embed editable diagrams in GitHub wiki pages

View, compare and edit .drawio diagram files in your GitHub repositories in Visual Studio Code with a third-party extension and github.dev.
Compare and commit the changes you made to the diagram files in your repository via github.dev

Code ➞ Mermaid syntax

There currently seems to be fewer tools that generate Mermaid syntax from code. You could write your own parser, such as this one in Python for parsing Prolog, but the existing PlantUML tools may be more convenient.


Generate PlantUML & Mermaid diagrams offline

PlantUML conversion is not available in our draw.io desktop app because it requires our servers to convert text to a diagram.

Instead, run your own draw.io server with our docker app as it supports PlantUML diagram, image and PDF generation, and does not depend on the draw.io servers.
The draw.io desktop app works on MacOS, Windows and Linux

Follow us on GitHub, Twitter, Facebook.

Share: