How to Create Mermaid Diagrams with Built-in Templates

This tutorial will guide you through creating and managing Mermaid diagrams in Document360. You will learn how to build professional diagrams using simple text-based syntax, edit them directly within the article editor, and visualize complex concepts without leaving your documentation.

Accessing the Mermaid Diagram Editor

To get started with Mermaid diagrams:

• Open the Article Editor in Document360
• Click the Insert menu or use the / (slash) command
• Select Mermaid Diagram from the available options

Using Built-in Templates

After opening the Mermaid editor, you can either start with a blank canvas or choose from a variety of built-in templates. Available templates include:

• Flowcharts
• Mind Maps
• Timelines
• Gantt Charts
• Pie Charts
• Venn Diagrams
• Tree Views
• Git Graphs
• Architecture Diagrams

Use the Search bar to quickly locate the template you need. Once selected, Mermaid automatically loads a pre-built structure that you can customize by replacing the placeholder text with your own content.

Creating Custom Diagrams

If you prefer to build a diagram from scratch, the Mermaid editor provides a split-view interface:

• Enter Mermaid syntax in the editor panel
• View a live preview of your diagram as you type
• See updates reflected instantly without leaving the editor

This allows you to quickly create and refine diagrams while keeping your documentation workflow uninterrupted.

Previewing and Validating Diagrams

The Mermaid editor includes several tools to help you review your diagrams before inserting them into your article. You can:

• Zoom in and out for a closer view
• Fit the diagram to the screen
• Switch to full-screen mode for focused editing

If your Mermaid syntax contains an error, the preview displays an error message highlighting the exact line causing the issue. If you attempt to close the editor without saving, a confirmation prompt helps prevent accidental data loss.

Editing Existing Mermaid Diagrams

To modify an existing diagram, simply click the inserted Mermaid diagram within the article editor. This reopens the Mermaid editor with the original syntax, allowing you to make changes and click Update to save the revised diagram.

Viewing Published Diagrams

Once your article is published, Mermaid diagrams appear seamlessly within the content. Readers can expand diagrams for a larger view, making workflows, system architectures, timelines, and other complex concepts easier to understand without cluttering the article.

Conclusion

Mermaid diagrams provide an efficient way to create, edit, and maintain technical diagrams directly within Document360. By combining text-based syntax with live previews and built-in templates, you can quickly produce clear, professional visuals that enhance your documentation.