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:

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:

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:

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:

Last modified: 11 November 2024