Diagrams are an essential part of the Software development process, helping to communicate complex ideas visually.
However, it is not possible to create diagrams directly in Jira. This means you need to integrate third-party solutions, and you end up wasting time from changing between different software.
So, what if you quickly and easily create diagrams directly in your Jira Issue?
Well, that's what Diagrammer is for.
It allows you to create diagrams in your Jira Issue using a simple, yet powerful markup language, transforming raw text into beautiful diagrams.
Seven different types of diagrams and charts are available:
- Sequence Diagram
- Class Diagram
- State Diagram
- Entity Relationship Diagram
- Flow Chart
- Gantt Chart
- User Journey
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
Renders this:
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
Renders this:
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Renders this:
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
Renders this:
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
Renders this:
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
Renders this:
I have used the amazing MermaidJS library to transform text into diagrams and charts.
The biggest challenge was finding a way to create beautiful diagrams without being able to use HTML tags directly in Forge. After trying different approaches, the final solution was transforming the diagrams into images.
I'm really proud of the flexibility that it is possible to achieve with my app. It can be easily extended to include more diagrams, more customisations, and yet everything is very simple to use.
It was a great experience to learn how to use Forge and other Atlassian products. The ecosystem is amazing and allows you to create amazing products by leveraging Atlassian solutions.
- Add more diagrams
- Allow to customise themes