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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://fulstech.gitbook.io/docs/whiteboarding-and-diagramming/mermaid-uml-diagrams-and-graphviz-diagrams-for-jira/jira-data-center-and-jira-server/usage.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.