# Mermaid diagrams

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/help/writerside/llms.txt).

Writerside includes built-in support for creating diagrams using [Mermaid](https://mermaid.js.org/intro/), 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](code.html) and set the language to `mermaid`. For example, here is how you can add a simple graph:

Semantic markup:

```XML

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

```

Markdown:

```PLAINTEXT
```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:

```MERMAID
graph LR
    A[Do you write docs?]
    A -- Yes --> B[Use Writerside]
    A -- No --> C[Tell us why]
```

> **Note:**
> To get full editor assistance for Mermaid notations, including completion, highlighting, and validation, install and enable the [Mermaid plugin](https://plugins.jetbrains.com/plugin/20146-mermaid): press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open `Settings`, go to `Plugins`, switch to the `Marketplace` tab, and type `Mermaid`.

> **Note:**
> The following is not supported in the current implementation:
>
>
>
>
>
> * Using [Font Awesome icons](https://mermaid.js.org/syntax/flowchart.html#basic-support-for-fontawesome)
>
> * Changing the diagram theme via the [%%{ }%% directive](https://mermaid.js.org/config/directives.html#directive-examples)
>
> * Adding [namespace groups](https://mermaid.js.org/syntax/classDiagram.html#define-namespace) and [cardinality options](https://mermaid.js.org/syntax/classDiagram.html#cardinality-multiplicity-on-relations) in class diagrams
>
> * [Creating and destroying actors](https://mermaid.js.org/syntax/sequenceDiagram.html#actor-creation-and-destruction-v10-3-0) in sequence diagrams

## 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.html#reference-code-from-file).

Semantic markup:

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

Markdown:

```PLAINTEXT
```Mermaid
```
{ src="graph.mermaid" }
```

Or via a relative path:

Semantic markup:

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

Markdown:

```PLAINTEXT
```Mermaid
```
{ src="../codeSnippets/graph.mermaid" }
```

## Examples

These are just a couple of examples. For more, see the [Mermaid documentation](https://mermaid.js.org/syntax/flowchart.html).

### 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.

Semantic markup:

```XML

<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>

```

Markdown:

```PLAINTEXT
```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:

```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!
```

### 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.

Semantic markup:

```XML

<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>

```

Markdown:

```PLAINTEXT
```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:

```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 --> [*]
```

### Git graph

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

Semantic markup:

```XML

<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>

```

Markdown:

```PLAINTEXT
```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:

```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
```