> For the complete documentation index, see [llms.txt](https://fulstech.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fulstech.gitbook.io/docs/whiteboarding-and-diagramming/mermaid-uml-diagrams-and-graphviz-diagrams-for-jira/jira-data-center-and-jira-server/usage.md).

# Usage

## Mermaid UML Diagrams

> **Please make sure the Jira Server can connect to** [**https://app-nwtmwlxsha-uk.a.run.app**](https://app-nwtmwlxsha-uk.a.run.app/). **We use this Web Service to render the diagrams.**

This app renders Mermaid UML diagrams inside Jira Wiki Editor. The Mermaid UML content must be wrapped inside the **{uml}…{uml}** macro. **For Jira 7+, the macros have to be used in Text mode and not Visual mode**.

Mermaid (<https://mermaid-js.github.io/mermaid/#/>) allows you to define UML diagrams in plain-text format just like Markdown. For a live editor to draft your diagrams, please try <https://mermaidjs.github.io/mermaid-live-editor>.

As an example, after the app is installed, please paste the following text into Issue Description:

```
{uml}
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br />prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
{uml}
```

**For Jira 7+, the macros have to be used in Text mode and not Visual mode**.

![Mermaid UML Diagrams and Graphviz Diagrams for Jira](https://fulstech.files.wordpress.com/2020/06/image-1.png?w=985)

All Mermaid UML content will be rendered as below.

![Mermaid UML Diagrams and Graphviz Diagrams for Jira](https://fulstech.files.wordpress.com/2020/06/image-2.png?w=927)

## Graphviz Diagrams

This app renders Graphviz diagrams inside Jira Wiki Editor. The Graphviz content must be wrapped inside the **{graphviz}…{graphviz}** macro. **For Jira 7+, the macros have to be used in Text mode and not Visual mode**.

As an example, after the app is installed, please paste the following text into Issue Description:

```
{graphviz}
graph {
  a -- b;
  b -- c;
  a -- c;
  d -- c;
  e -- c;
  e -- a;
}
{graphviz}
```

**For Jira 7+, the macros have to be used in Text mode and not Visual mode**.

![Mermaid UML Diagrams and Graphviz Diagrams for Jira](https://fulstech.files.wordpress.com/2017/09/jira-graphviz-21.png)

All Graphviz content will be rendered as below.

![Mermaid UML Diagrams and Graphviz Diagrams for Jira](https://fulstech.files.wordpress.com/2017/09/jira-graphviz-3.png)

## Examples

### Flowchart

![Input](/files/-MkUs_oJC5DKeT_xwaTh)

![Render](/files/-MkUsTB67Zzejr2H4_ix)

### Sequence diagram

![Input](/files/-MkUt7A6iSpie9PjLF-i)

![Render](/files/-MkUtBY2X0MnGmhJKOLL)

### Class diagram

![Input](/files/-MkUtPxZdjWnLtLgMDOa)

![Render](/files/-MkUtUk8BHzvDUht9xnn)

### State diagram

![Input](/files/-MkUufn7vwHI3fiuKHaA)

![Render](/files/-MkUumhDeQZ2kQxTo1Fn)

### Entity Relationship diagram

![Input](/files/-MkUvh77jxn3mARGgUs_)

![Render](/files/-MkUvpdC914gXn4hqarl)

### User Journey

![Input](/files/-MkUwDTjvsSHr9eax5Pj)

![Render](/files/-MkUw2SBrfqtDtpA1qwA)

### Gantt chart

![Input](/files/-MkUwPRZIOUt2hEouqs9)

![Render](/files/-MkUxZGa1aXEX2ofWSzw)

### Pie chart

![Input](/files/-MkUxi6MQEgwoEVhbI9_)

![Render](/files/-MkUxneKvSlit2HRyFkX)

### Graphviz

![Input](/files/-MkV-HNYNfQL2UGqPWwV)

![Render](/files/-MkV-N7fwU-m-YhHdb6V)