Fulstech - Jira and Confluence Add-on Developer
ProductsSecurity PolicyPrivacy PolicyEULASLA
  • 🏠Home
  • Markdown
    • Markdown Editor for Jira (Markin)
      • Jira Cloud
        • Overview
        • Create a Markdown-enabled Custom Field
        • Markdown Syntax
        • Support
      • Jira Data Center and Jira Server
        • Overview
        • Create a Markdown-enabled Field
        • Markdown Syntax
        • Migrate to Jira Cloud
        • Support
    • Markdown for Confluence
      • Confluence Cloud
        • Overview
        • Usage
        • Support
  • LaTeX
    • LaTeX for Jira - Math Editor
      • Jira Cloud
        • Overview
        • Usage (with browser extension)
        • Usage (without browser extension)
        • Support
      • Jira Data Center and Jira Server
        • Overview
        • Usage
        • Support
    • LaTeX for Confluence with Math Editor and Plotting
      • Confluence Cloud
        • Overview
        • Usage
        • Migrate from Confluence Server and Confluence Data Center
        • Support
      • Confluence Data Center and Confluence Server
        • Overview
        • Usage (from version 4.0.0)
        • How to install TeX Live
        • Migrate to Confluence Cloud
        • Troubleshooting "Unknown macro" error
        • Support
        • (Deprecated) Usage (for version older than 4.0.0)
  • Whiteboarding and Diagramming
    • Mermaid UML Diagrams and Graphviz Diagrams for Jira
      • Jira Cloud
        • Overview
        • Usage
        • Support
      • Jira Data Center and Jira Server
        • Overview
        • Usage
        • Announcement of the Data Center version
        • Support
    • Excalidraw for Jira
      • Jira Cloud
        • Overview
        • Usage
        • Support
    • Excalidraw for Confluence - with Mermaid, PlantUML, and Graphviz
      • Confluence Cloud
        • Overview
        • Usage
        • Support
      • Confluence Data Center and Confluence Server
        • Overview
        • Usage
        • Support
    • PlantUML, Mermaid UML, Graphviz: UML Diagrams for Confluence
      • Confluence Cloud
        • Overview
        • Usage
        • Support
      • Confluence Data Center and Confluence Server
        • Overview
        • Usage
        • Support
    • Mind Mapping for Confluence
      • Confluence Cloud
        • Overview
        • Usage
        • Support
    • User Flow (Wireflow) for Confluence
      • Confluence Cloud
        • Overview
        • Usage
        • Support
  • Custom Fields
    • Table Custom Field for Jira Cloud
      • Overview
      • Usage
      • Support
    • JEditor-compatible custom field for Jira Cloud
      • Jira Cloud
        • Overview
        • Create a JEditor-compatible Custom Field
        • Migrate to Jira Cloud
        • Support
    • Checklist for Jira Server
      • Overview
      • Usage
      • Support
  • Security Policy
  • Privacy Policy
  • End User License Agreement
  • Service Level Agreement (SLA)
  • Archived Apps
    • Better font for Jira Server
      • Overview
      • Usage
      • Support
Powered by GitBook
On this page
  • For classic Jira projects
  • Associate the UML field to issue screens
  • Add the UML panel to the issue screen
  • For Next-gen Jira project
  • Add Mermaid UML graphs to an issue
  • Examples
  • Flowchart
  • Sequence diagram
  • Class diagram
  • State diagram
  • User Journey
  • Gantt chart
  • Piechart

Was this helpful?

  1. Whiteboarding and Diagramming
  2. Mermaid UML Diagrams and Graphviz Diagrams for Jira
  3. Jira Cloud

Usage

PreviousOverviewNextSupport

Last updated 3 years ago

Was this helpful?

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

Search for the custom field UML text and add it to screens.

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.

On the Project settings page, click on Apps on the left sidebar.

Click on App fields on the left sidebar and enable Mermaid UML for Jira Cloud.

Go back to the Project settings page, click on Issue types on the left sidebar.

Drag the UML text field from the right sidebar and drop it into the Description fields area.

Add Mermaid UML graphs to an issue

Click on the Edit button.

Please do not edit the custom field itself. Whenever you want to add or modify graphs, please use the app’s Edit button.

Sample content:

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

{uml}
gantt
dateFormat  YYYY-MM-DD
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d
{uml}

After that, click Save.

Examples

Flowchart

Sequence diagram

Class diagram

State diagram

User Journey

Gantt chart

Piechart

Mermaid UML Diagrams and Graphviz Diagrams for Jira
Mermaid UML Diagrams and Graphviz Diagrams for Jira
Mermaid UML Diagrams and Graphviz Diagrams for Jira
Mermaid UML Diagrams and Graphviz Diagrams for Jira
Mermaid UML Diagrams and Graphviz Diagrams for Jira
Mermaid UML Diagrams and Graphviz Diagrams for Jira
Mermaid UML Diagrams and Graphviz Diagrams for Jira
Mermaid UML Diagrams and Graphviz Diagrams for Jira
Mermaid UML Diagrams and Graphviz Diagrams for Jira
Mermaid UML Diagrams and Graphviz Diagrams for Jira
Mermaid UML Diagrams and Graphviz Diagrams for Jira

The UML content is wrapped around by {uml}…{uml}. The diagram is defined using Mermaid. Mermaid () allows you to define UML diagrams in plain-text format just like Markdown. For a live editor to draft your diagrams, please try .

Mermaid UML Diagrams and Graphviz Diagrams for Jira
Mermaid UML Diagrams and Graphviz Diagrams for Jira

Flowcharts can be rendered with Mermaid. See more .

Sequence diagrams can be rendered with Mermaid. See more .

Class diagrams can be rendered with Mermaid. See more .

State diagrams can be rendered with Mermaid. See more .

User Journey can be rendered with Mermaid. See more .

Gantt charts can be rendered with Mermaid. See more .

Pie charts can be rendered with Mermaid. See more .

https://mermaid-js.github.io/mermaid/#/
https://mermaidjs.github.io/mermaid-live-editor
https://mermaid-js.github.io/mermaid/#/flowchart
https://mermaid-js.github.io/mermaid/#/sequenceDiagram
https://mermaid-js.github.io/mermaid/#/classDiagram
https://mermaid-js.github.io/mermaid/#/stateDiagram
https://mermaid-js.github.io/mermaid/#/user-journey
https://mermaid-js.github.io/mermaid/#/gantt
https://mermaid-js.github.io/mermaid/#/pie
Input
Render
Input
Render
Input
Render
Input
Render
Input
Render
Input
Render
Input
Render