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:
The following is not supported in the current implementation:
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.