Skip to main content

Diagrams and charts

You can create diagrams and charts in your Swimm doc using Mermaid syntax in the editor.

Mermaid + Swimm = up-to-date diagrams 🤯​

To get started, type /Diagram to start from scratch or select one of our Mermaid templates.

Get started with a template​

DiagramDescription
SequenceTrack object interactions and events sequentially for processes or use cases.
FlowchartMap steps and decisions to show process flow and outcomes.
ClassDetail a system's structure with classes, attributes, methods, and their interrelationships.
StateMonitor object states and their transitions throughout a process.
RelationConnect entities or database tables to visualize their relationships.
GanttSchedule and track project tasks, durations, and dependencies over time.
User journeyChart a user's path to accomplish tasks within a system or service.
GitTrace the history of a Git repository with visual representations of branches and commits.
PieSegment data proportionally to illustrate parts of a whole in a circular graph.
BlockSketch high-level system design or architecture using blocks for components or modules.

Mermaid diagram in Swimm

Use Smart Tokens to keep your diagrams up-to-date​

Increase the value and reliability of your diagrams with Swimm’s Smart Tokens.

Initialize a token by typing backtick ` or /Smart Token within your diagram labels to code-couple constants or variables. Now that your Smart token has been added to your diagram, your diagram will stay up-to-date when you refactor your code. 🤯

Mermaid diagram in Swimm

Learn more​

To find out more about Swimm's integration with Mermaid, and different use cases for diagrams in code documentation, see our blog post.

Looking for additional Mermaid resources? Check out Mermaid's docs and this Mermaid live editor.


This document is automatically kept up to date using Swimm.