Mermaid Diagrams in Jira

Mermaid is a JavaScript-based diagramming and charting tool that enables the creation of diagrams using a markdown-inspired syntax.
Jira supports Mermaid syntax natively within issue descriptions and comments, making it ideal for visualizing workflows, decision logic, timelines, and system architecture directly in your tickets.

---

🧭 Purpose

This document provides a practical reference for using Mermaid diagrams in Jira. It outlines supported syntax and demonstrates common use cases with examples, including:

• Flowcharts (top-down or left-to-right)
• Decision trees
• Timelines
• Grouped subgraphs
• Node styling

---

🕓 Timeline Visualization

Diagram Code

Rendered Diagram

timeline
  title Deployment Timeline
  Modual-1: Requirements Finalized
          : Test
          : Scope Alignment
  Modual-2: Development Starts
          : Backend Setup
          : Frontend Design
  Modual-3: Internal QA
          : Bug Fixing Round 1
  Modual-4: UAT & Stakeholder Review
          : Feedback Integration
  Modual-5: Production Release
          : Post-deployment Monitoring

---

📊 Graph

📋 Basic Syntax

Rendered Diagram

Diagram Code

graph TD
  A[Start] --> B[Next Step]

---

🎯 Flowchart Example (Top-Down)

Rendered Diagram

Diagram Code

graph TD
  A[User logs in] --> B[Authenticate]
  B --> C{Credentials valid?}
  C -- Yes --> D[Redirect to Dashboard]
  C -- No --> E[Show Error Message]
  D --> F[End]
  E --> F

---

🔄 Flowchart Example (Left-to-Right)

Rendered Diagram

Diagram Code

graph LR
  A[Trigger] --> B{Check Condition}
  B -- Yes --> C[Execute Task A]
  B -- No --> D[Execute Task B]
  C --> E[Log Result]
  D --> E

---

🔢 Switch/Case Logic

Rendered Diagram

Diagram Code

graph TD
  Start[Start] --> Switch{Select Option}
  Switch -- Option A --> A[Perform A]
  Switch -- Option B --> B[Perform B]
  Switch -- Option C --> C[Perform C]
  A --> End[End]
  B --> End
  C --> End

---

🧱 Subgraph (Grouped Logic)

Rendered Diagram

Diagram Code

graph TD
  A[Start] --> B[Check Payment Type]
  B --> Hybrid

  subgraph Hybrid_AND_DI [Paybill Type Rate Cards]
    Hybrid1[Hybrid] --> DI[DI Network]
  end

  DI --> C[Calculate Rate]
  C --> D[End]

🎨 Node Styling

Rendered Diagram

Diagram Code

graph TD
  A[Start] --> B{Approve?}
  B -- Yes --> C[Approved]
  B -- No --> D[Rejected]

  style A fill:#cce5ff,color:#000;
  style B fill:#fff3cd,color:#000;
  style C fill:#d4edda,color:#000;
  style D fill:#f8d7da,color:#000;

---

🧪 If-Else Logic Pattern

Rendered Diagram

Diagram Code

graph TD
  Start[Initiate] --> Step1[Validate Input]
  Step1 --> Condition1{Valid Format?}
  Condition1 -- Yes --> Step2[Save to DB]
  Condition1 -- No --> Error1[Show Format Error]
  Step2 --> Condition2{Data Consistent?}
  Condition2 -- Yes --> Finalize[Send Success Response]
  Condition2 -- No --> Error2[Show Consistency Error]
  Finalize --> End
  Error1 --> End
  Error2 --> End

---

💬 Chatbot Interaction Example 1

Rendered Diagram

Diagram Code

graph TD
  A[Login] --> B{Is Chat Support Enabled?}
  B -- Yes --> C[Show Chat Icon]
  B -- No --> Z[Skip Chat Initialization]
  C --> D[User Clicks Chat Icon]
  D --> E[Initiate Bot Session]
  E --> F[Send Context: UserID, Email, Supplier]
  F --> G[Bot Responds]
  G --> H{User Logs Out?}
  H -- Yes --> I[Terminate Chat Session]
  H -- No --> G
  I --> J[End]

💬 Chatbot Interaction Example 2

Rendered Diagram

Diagram Code

flowchart LR
    %% Nodes
    A[Supplier user logs into ViSN Platform]:::userAction
    B{Is Chat Support Enabled at Group Level?}:::decision
    C[Show SalesIQ Chat Icon]:::systemAction
    D[Chat Icon Not Displayed]:::systemFail
    E[User Clicks Chat Icon]:::userAction
    F[Connect to SalesIQ Chatbot]:::systemAction
    G[Capture User Details: User Type Name, Email, Supplier Name, User ID, Garage ID]:::dataCapture
    H[Live Chat Session Active]:::activeState
    I{User Logs Out?}:::decision
    J[Terminate Chat Session in SalesIQ]:::terminate
    K[Active Chat Session in SalesIQ]:::systemAction

    %% Flow
    A --> B
    B -- Yes --> C
    B -- No --> D
    C --> E
    E --> F
    F --> G
    G --> H
    H --> I
    I -- Yes --> J
    I -- No --> K


    %% Styles
    classDef userAction fill:#D0F0FD,color:#000;
    classDef decision fill:#FFF2CC,color:#000;
    classDef systemAction fill:#E2F0CB,color:#000;
    classDef dataCapture fill:#F4CCCC,color:#000;
    classDef activeState fill:#D9EAD3,color:#000;
    classDef terminate fill:#F9CB9C,color:#000;
    classDef systemFail fill:#F4CCCC,color:#000;

---

🧩 Use Case Reference

Use Case	Recommended Diagram Type
Workflow/Processes	graph TD or graph LR
Feature Logic Paths	Decision Flowchart
Release Planning	timeline
Rule-based Routing	Flowchart with {}
System Mapping	Subgraphs

---

🔧 Tips and Best Practices

• Begin each diagram with graph TD (top-down) or graph LR (left-to-right)
• Use curly braces {} for decision nodes
• Use subgraph blocks to group related steps
• Apply style rules to color and differentiate nodes for clarity

---

📚 Resources

For full Mermaid documentation and advanced usage examples, refer to the official guide: 👉 https://mermaid-js.github.io/mermaid

Status: Accepted
Category: Protected
Authored By: Jeyakumar Arunagiri on May 12, 2025