Skip to main content

Diagrams

Diagrams can be rendered using Mermaid in a code block.

Use​

The CMS directly supports editing Mermaid diagrams.

  1. Click the Mermaid icon.
  2. Enter the Markdown in the box.

Click Preview to view your diagram.

Note

Currently, zenUML diagrams are not supported and mind map diagrams may produce unusual behaviour. Not all diagram types can be previewed in the CMS.

For more information, refer to Mermaid in the TinaCMS documentation.

For information on theming Mermaid, refer to Diagrams in the Docusaurus documentation.

Examples​

Architecture diagram​

Block diagram​

C4 context diagram​

Class diagram​

Entity relationship diagram​

Flowchart​

Gantt chart​

Git graph​

Kanban board​

Mindmap​

Packet diagram​

Pie chart​

Quadrant chart​

Radar chart​

Requirement diagram​

Sankey diagram​

Sequence diagram​

State diagram​

Timeline​

Treemap​

User journey​

XY chart​

Related topics

  • Math equations – Writing LaTeX math equations.
  • MDX and React – Using React in docStatic Markdown documents with MDX.
  • Create a doc – Create a Markdown document.
  • Docs introduction – An introduction to docStatic docs.
  • Styling and layout – A Docstatic site is a pre-rendered single-page React application. You can style it the way you style React apps.
  • Upgrading – Upgrade an existing docStatic site to the latest release using the update command.
  • Advanced guides – Advanced docStatic guides.