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

The following is not supported in the current implementation:

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:

Tech writerDeveloperJunior developerAdding 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!Tech writerDeveloperJunior developer

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:

mainDOC-123-update-the-doc-A0-aa9599f1-144a037write the procedureupdate screenshots5-3d988416-f3bb0ba
Last modified: 13 June 2024