Usage

Search…
Usage
After installing and starting the trial period, the app will add a custom field name UML text to the Jira instance.
The first step is to add the custom field UML text to issue types and projects.
For classic Jira projects
Associate the UML field to issue screens
Navigate to the Custom fields page.
Mermaid UML Diagrams and Graphviz Diagrams for Jira
Mermaid UML Diagrams and Graphviz Diagrams for Jira
Search for the custom field UML text and add it to screens.
Mermaid UML Diagrams and Graphviz Diagrams for Jira
Mermaid UML Diagrams and Graphviz Diagrams for Jira
Mermaid UML Diagrams and Graphviz Diagrams for Jira
Add the UML panel to the issue screen
On an issue view, click on the “three dots” icon and select UML Diagrams.
For Next-gen Jira project
Click on Project settings on the left sidebar.
Mermaid UML Diagrams and Graphviz Diagrams for Jira
On the Project settings page, click on Apps on the left sidebar.
Mermaid UML Diagrams and Graphviz Diagrams for Jira
Click on App fields on the left sidebar and enable Mermaid UML for Jira Cloud.
Mermaid UML Diagrams and Graphviz Diagrams for Jira
Go back to the Project settings page, click on Issue types on the left sidebar.
Mermaid UML Diagrams and Graphviz Diagrams for Jira
Drag the UML text field from the right sidebar and drop it into the Description fields area.
Mermaid UML Diagrams and Graphviz Diagrams for Jira
Mermaid UML Diagrams and Graphviz Diagrams for Jira
Add Mermaid UML graphs to an issue
Click on the Edit button.
Mermaid UML Diagrams and Graphviz Diagrams for Jira
Please do not edit the custom field itself. Whenever you want to add or modify graphs, please use the app’s Edit button.
The UML content is wrapped around by {uml}…{uml}. The diagram is defined using Mermaid. 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.
Sample content:
1
{uml}
2
sequenceDiagram
3
    participant Alice
4
    participant Bob
5
    Alice->>John: Hello John, how are you?
6
    loop Healthcheck
7
        John->>John: Fight against hypochondria
8
    end
9
    Note right of John: Rational thoughts <br/>prevail!
10
    John-->>Alice: Great!
11
    John->>Bob: How about you?
12
    Bob-->>John: Jolly good!
13
{uml}
14
​
15
{uml}
16
gantt
17
dateFormat  YYYY-MM-DD
18
excludes weekdays 2014-01-10
19
​
20
section A section
21
Completed task            :done,    des1, 2014-01-06,2014-01-08
22
Active task               :active,  des2, 2014-01-09, 3d
23
Future task               :         des3, after des2, 5d
24
Future task2               :         des4, after des3, 5d
25
{uml}
Copied!
Mermaid UML Diagrams and Graphviz Diagrams for Jira
After that, click Save.
Mermaid UML Diagrams and Graphviz Diagrams for Jira
Examples
Flowchart
Flowcharts can be rendered with Mermaid. See more https://mermaid-js.github.io/mermaid/#/flowchart.
Input
Render
Sequence diagram
Sequence diagrams can be rendered with Mermaid. See more https://mermaid-js.github.io/mermaid/#/sequenceDiagram.
Input
Render
Class diagram
Class diagrams can be rendered with Mermaid. See more https://mermaid-js.github.io/mermaid/#/classDiagram.
Input
Render
State diagram
State diagrams can be rendered with Mermaid. See more https://mermaid-js.github.io/mermaid/#/stateDiagram.
Input
Render
User Journey
User Journey can be rendered with Mermaid. See more https://mermaid-js.github.io/mermaid/#/user-journey.
Input
Render
Gantt chart
Gantt charts can be rendered with Mermaid. See more https://mermaid-js.github.io/mermaid/#/gantt.
Input
Render
Piechart
Pie charts can be rendered with Mermaid. See more https://mermaid-js.github.io/mermaid/#/pie.
Input
Render
​