Writerside Help

Mermaid diagrams

Writerside includes built-in support for creating diagrams using Mermaid, a JavaScript-based tool for diagramming and charting. Mermaid allows you to define diagrams using a simple, Markdown-inspired syntax.

Mermaid supports numerous types of diagrams and charts, including flowcharts, Gantt charts, pie charts, and Git graphs.

To add a Mermaid diagram, insert a code block and set the language to mermaid. For example, here is how you can add a simple graph:

<code-block lang="mermaid"> graph LR A[Do you write docs?] A -- Yes --> B[Use Writerside] A -- No --> C[Tell us why] </code-block>
```mermaid graph LR A[Do you write docs?] A -- Yes --> B[Use Writerside] A -- No --> C[Tell us why] ```

The result will look as follows:

Yes

No

Do you write docs?

Use Writerside

Tell us why

Reference Mermaid diagram from file

If you have a file with Mermaid code, you can reference it instead of copying the Mermaid code into the code block. For more information, see Reference code from file.

<code-block lang="Mermaid" src="graph.mermaid"/>
```Mermaid ``` { src="graph.mermaid" }

Or via a relative path:

<code-block lang="Mermaid" src="../codeSnippets/graph.mermaid"/>
```Mermaid ``` { src="../codeSnippets/graph.mermaid" }

Examples

These are just a couple of examples. For more, see the Mermaid documentation.

Sequence diagram

Use this type of diagram to illustrate a process within a system you are describing and give a clear understanding of how different steps are connected and what happens at each stage of the process.

<code-block lang="mermaid"> sequenceDiagram Tech writer -->> Developer: Hi, can you check that I've described everything correctly? Developer -->> Junior developer: Hi, can you, please, help our TW with the task? Developer --x Tech writer: Sure, I've asked Garold to take care of this, it will help him to understand the logic better. Junior developer -->> Developer: No problem! Developer --> Tech writer: Adding you both to a group chat ... Note right of Developer: Adding to the chat. Tech writer --> Junior developer: Hi, Garold! </code-block>
```mermaid sequenceDiagram Tech writer -->> Developer: Hi, can you check that I've described everything correctly? Developer -->> Junior developer: Hi, can you, please, help our TW with the task? Developer --x Tech writer: Sure, I've asked Garold to take care of this, it will help him to understand the logic better. Junior developer -->> Developer: No problem! Developer --> Tech writer: Adding you both to a group chat ... Note right of Developer: Adding to the chat. Tech writer --> Junior developer: Hi, Garold! ```

The result will look as follows:

Junior developerDeveloperTech writerJunior developerDeveloperTech writerAdding to the chat.Hi, can you check that I've described everything correctly?Hi, can you, please, help our TW with the task?Sure, I've asked Garold to take care of this, it will help him to understand the logic better.No problem!Adding you both to a group chat ...Hi, Garold!

State diagram

Use state diagrams to illustrate how different inputs affect the behavior of a system, or to visualize what actions users can take to transition between the different states.

<code-block lang="mermaid"> stateDiagram-v2 [*] --> Draft RR: Ready for review NU: Need updates AC: Apply changes LGTM: All good RP: Ready to publish Draft --> RR RR --> Review Review --> NU NU --> AC AC --> Review Review --> LGTM LGTM --> RP RP --> [*] </code-block>
```mermaid stateDiagram-v2 [*] --> Draft RR: Ready for review NU: Need updates AC: Apply changes LGTM: All good RP: Ready to publish Draft --> RR RR --> Review Review --> NU NU --> AC AC --> Review Review --> LGTM LGTM --> RP RP --> [*] ```

The result will look as follows:

Draft

Ready for review

Need updates

Apply changes

All good

Ready to publish

Review

Git graph

Use this type of visualization to describe a Git branching flow for external contributors or for newcomers on your team.

<code-block lang="mermaid"> gitGraph commit commit branch DOC-123-update-the-doc-A checkout DOC-123-update-the-doc-A commit id: "write the procedure" commit id: "update screenshots" checkout main merge DOC-123-update-the-doc-A commit commit </code-block>
```mermaid gitGraph commit commit branch DOC-123-update-the-doc-A checkout DOC-123-update-the-doc-A commit id: "write the procedure" commit id: "update screenshots" checkout main merge DOC-123-update-the-doc-A commit commit ```

The result will look as follows:

0-72f59f41-5b1a7b6write the procedureupdate screenshots5-d6418546-3cccaa0
Last modified: 11 November 2024
Downloadable resourcesPlantUML diagrams