State Diagrams

Published

August 22, 2026

State Diagram Software

We will be generating state diagrams all semester, which can be done with a variety of different software packages. Mermaid will be the only software UML toolsupported by Dr. Palmeri and the teaching team in this course; the other tools are included for completeness of what you might encounter in professional settings.

  • Mermaid Markdown

    • Markdown-based diagramming tool that can be integrated into VS Code IDE with extension.

    • Native Quarto Markdown (what is used for class content) rendering without needing to export to a separate image file.

    • Ammenable to version control systems (VCS) since it is text-based.

    • More modern and easier to use than PlantUML.

    • State digram-specific syntax: https://mermaid.ai/open-source/syntax/stateDiagram.html

Note

VS Code has built-in support for Mermaid diagrams and diagrams can be rendered by GitLab, so no extensions have to be installed to support these diagrams. You will need an extension or other tools to export diagrams to image files (e.g., PNG, SVG) if you want to use them in other documents or presentations.

  • PlantUML

    • Text-based diagramming tool with very long history.

    • Can be integrated into VS Code with an extension.

    • A bit outdated, and a tad clunky in default layouts without some “nudging”

    • Ammenable to version control systems (VCS) since it is text-based.

    Note

    Rendering engine requires Java Runtime Engine (JRE), which may have to be installed on your laptop if you do not already have it. If you would like to avoid installing that, you can use the PlantUML Server option in the PlantUML VS Code extension settings.

  • draw.io

    • Web-based diagramming tool (GUI) that can be integrated into VS Code (Draw.io Integration)

    • Very feature-rich and easy to use.

    • Not text-based, so less VCS friendly.

    • Cannot directly render in Quarto Markdown, so you will need to export your diagrams to an image file (e.g., PNG, SVG).

  • Lucidchart

    • Web-based diagramming tool (GUI)

    • Very feature-rich and easy to use

    • Not text-based, so less VCS friendly.