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
  • Excalidraw
  • Insert Excalidraw drawings
  • Adding new shapes from the Excalidraw Libraries website
  • Adding shapes to library
  • Mermaid UML Diagrams Macro
  • PlantUML Diagrams Macro
  • Graphviz Diagrams Macro
  • Examples
  • Mermaid
  • Graphviz
  • PlantUML

Was this helpful?

  1. Whiteboarding and Diagramming
  2. Excalidraw for Confluence - with Mermaid, PlantUML, and Graphviz
  3. Confluence Data Center and Confluence Server

Usage

PreviousOverviewNextSupport

Last updated 2 years ago

Was this helpful?

Excalidraw

Insert Excalidraw drawings

Select the Excalidraw macro from the macro list.

Click on the macro placeholder, and click Edit.

Draw anything you want. To draw perfect shapes like a circle, hold the Shift button while drawing.

Click Save and Close. If you don't want to save the changes, click the X button on the top right corner.

Adding new shapes from the Excalidraw Libraries website

To add new shapes, visit the website and click the Download button to save the collection you need to your computer. The downloaded library file's extension is .excalidrawlib.

Do not use the Add to Excalidraw button, as the library will not be added to the plugin-hosted Excalidraw Editor.

Open the Excalidraw Editor in Confluence, and upload the library file.

You can then drag and drop shapes into the canvas.

Adding shapes to library

To add a shape to library, select the shape, right-click on it, and click Add to Library.

To save your shapes library locally (e.g. for backup purposes), select the shape in the library panel, and click Save to in the menu.

Mermaid UML Diagrams Macro

In the Confluence editor, insert the Mermaid UML macro.

A dialog will appear. Type the content of the UML diagram into the macro editor. Here is an example:

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!

PlantUML Diagrams Macro

In the Confluence editor, insert the PlantUML macro.

Type the content of the UML diagram into the macro editor.

Here is an example:

@startuml C4_Elements
!pragma layout smetana
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

Person(personAlias, "Label", "Optional Description")
Container(containerAlias, "Label", "Technology", "Optional Description")
System(systemAlias, "Label", "Optional Description")

Rel(personAlias, containerAlias, "Label", "Optional Technology")
@enduml

Graphviz Diagrams Macro

In the Confluence editor, insert the Graphviz macro.

Type the content of the Graphviz diagram into the macro editor. Here is an example:

graph {
  a -- b;
  b -- c;
  a -- c;
  d -- c;
  e -- c;
  e -- a;
}

Examples

Mermaid

Flowchart

Sequence diagram

Class diagram

State diagram

Entity Relationship diagram

User Journey

Gantt chart

Pie chart

Graphviz

This diagram is rendered with Graphviz.

PlantUML

Sequence diagram

@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response
@enduml

Use Case diagram

@startuml
!pragma layout smetana
left to right direction
actor Guest as g
package Professional {
    actor Chef as c
    actor "Food Critic" as fc
}
package Restaurant {
    usecase "Eat Food" as UC1
    usecase "Pay for Food" as UC2
    usecase "Drink" as UC3
    usecase "Review" as UC4
}
fc --> UC4
g --> UC1
g --> UC2
g --> UC3
@enduml

Class diagram

@startuml
!pragma layout smetana
Object <|-- ArrayList
Object : equals()
ArrayList : Object[] elementData
ArrayList : size()
@enduml

Activity diagram

@startuml
start
repeat
    :read data;
    :generate diagrams;
repeat while (more data?) is (yes)
->no;
stop
@enduml

Component diagram

@startuml
!pragma layout smetana
package "Some Group" {
  HTTP - [First Component]
  [Another Component]
}
node "Other Groups" {
  FTP - [Second Component]
  [First Component] --> FTP
}
cloud {
  [Example 1]
}
database "MySql" {
  folder "This is my folder" {
    [Folder 3]
  }
  frame "Foo" {
    [Frame 4]
  }
}
[Another Component] --> [Example 1]
[Example 1] --> [Folder 3]
[Folder 3] --> [Frame 4]
@enduml

Deployment diagram

@startuml
!pragma layout smetana
node node1
node node2
node node3
node node4
node node5
node1 -- node2 : label1
node1 .. node3 : label2
node1 ~~ node4 : label3
node1 == node5
@enduml

State diagram

@startuml
!pragma layout smetana
scale 350 width
[*] --> NotShooting
state NotShooting {
  [*] --> Idle
  Idle --> Configuring : EvConfig
  Configuring --> Idle : EvConfig
}
state Configuring {
  [*] --> NewValueSelection
  NewValueSelection --> NewValuePreview : EvNewValue
  NewValuePreview --> NewValueSelection : EvNewValueRejected
  NewValuePreview --> NewValueSelection : EvNewValueSaved
  state NewValuePreview {
    State1 -> State2
  }
}
@enduml

Timing diagram

@startuml
robust "Web Browser" as WB
concise "Web User" as WU
@0
WU is Idle
WB is Idle
@100
WU is Waiting
WB is Processing
@300
WB is Waiting
@enduml

JSON

@startjson
{
  "firstName": "John",
  "lastName": "Smith",
  "isAlive": true,
  "age": 27,
  "address": {
    "streetAddress": "21 2nd Street",
    "city": "New York",
    "state": "NY",
    "postalCode": "10021-3100"
  },
  "phoneNumbers": [
    {
      "type": "home",
      "number": "212 555-1234"
    },
    {
      "type": "office",
      "number": "646 555-4567"
    }
  ],
  "children": [],
  "spouse": null
}
@endjson

Mindmap

@startmindmap
* Class Templates
**:Example 1
<code>
template <typename T>
class cname{
void f1()<U+003B>
...
}
</code>
;
**:Example 2
<code>
other template <typename T>
class cname{
...
</code>
;
@endmindmap

Work Breakdown Structure

@startwbs
* Business Process Modelling WBS
** Launch the project
*** Complete Stakeholder Research
*** Initial Implementation Plan
** Design phase
*** Model of AsIs Processes Completed
**** Model of AsIs Processes Completed1
**** Model of AsIs Processes Completed2
*** Measure AsIs performance metrics
*** Identify Quick Wins
** Complete innovate phase
@endwbs

Entity Relationship diagram

@startuml
!pragma layout smetana
' hide the spot
hide circle
' avoid problems with angled crows feet
skinparam linetype ortho
entity "Entity01" as e01 {
  *e1_id : number <<generated>>
  --
  *name : text
  description : text
}
entity "Entity02" as e02 {
  *e2_id : number <<generated>>
  --
  *e1_id : number <<FK>>
  other_details : text
}
entity "Entity03" as e03 {
  *e3_id : number <<generated>>
  --
  e1_id : number <<FK>>
  other_details : text
}
e01 ||..o{ e02
e01 |o..o{ e03
@enduml

C4 diagram

@startuml
!pragma layout smetana
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
' uncomment the following line and comment the first to use locally
' !include C4_Container.puml

' LAYOUT_TOP_DOWN()
' LAYOUT_AS_SKETCH()
LAYOUT_WITH_LEGEND()

title Container diagram for Internet Banking System

Person(customer, Customer, "A customer of the bank, with personal bank accounts")

System_Boundary(c1, "Internet Banking") {
    Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
    Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")
    Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
    ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
    Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
}

System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system")
System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

Rel(customer, web_app, "Uses", "HTTPS")
Rel(customer, spa, "Uses", "HTTPS")
Rel(customer, mobile_app, "Uses")

Rel_Neighbor(web_app, spa, "Delivers")
Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
Rel_Back_Neighbor(database, backend_api, "Reads from and writes to", "sync, JDBC")

Rel_Back(customer, email_system, "Sends e-mails to")
Rel_Back(email_system, backend_api, "Sends e-mails using", "sync, SMTP")
Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
@endumlplan

AWS architecture diagram

@startuml S3 Upload Workflow
!pragma layout smetana
'Copyright 2019 Amazon.com, Inc. or its affiliates. All Rights Reserved.
'SPDX-License-Identifier: MIT (For details, see https://github.com/awslabs/aws-icons-for-plantuml/blob/master/LICENSE)

!define AWSPuml https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/v15.0/dist
!include AWSPuml/AWSCommon.puml
!include AWSPuml/AWSExperimental.puml
!include AWSPuml/Groups/all.puml
!include AWSPuml/Compute/LambdaLambdaFunction.puml
!include AWSPuml/General/Documents.puml
!include AWSPuml/General/Multimedia.puml
!include AWSPuml/General/Tapestorage.puml
!include AWSPuml/General/User.puml
!include AWSPuml/MediaServices/ElementalMediaConvert.puml
!include AWSPuml/MachineLearning/Transcribe.puml
!include AWSPuml/Storage/SimpleStorageService.puml

' define custom group for Amazon S3 bucket
AWSGroupColoring(S3BucketGroup, #FFFFFF, AWS_COLOR_GREEN, plain)
!define S3BucketGroup(g_alias, g_label="Amazon S3 bucket") AWSGroupEntity(g_alias, g_label, AWS_COLOR_GREEN, SimpleStorageService, S3BucketGroup)

' Groups are rectangles with a custom style using stereotype - need to hide
hide stereotype
skinparam linetype ortho
skinparam rectangle {
    BackgroundColor AWS_BG_COLOR
    BorderColor transparent
}

rectangle "$UserIMG()\nUser" as user
AWSCloudGroup(cloud){
  RegionGroup(region) {
    S3BucketGroup(s3) {
      rectangle "$MultimediaIMG()\n\tvideo\t" as video
      rectangle "$TapestorageIMG()\n\taudio\t" as audio
      rectangle "$DocumentsIMG()\n\ttranscript\t" as transcript

      user -r-> video: <$Callout_1>\lupload
      video -r-> audio
      audio -r-> transcript
    }

    rectangle "$LambdaLambdaFunctionIMG()\nObjectCreated\nevent handler" as e1
    rectangle "$ElementalMediaConvertIMG()\nAWS Elemental\nMediaConvert" as mediaconvert
    rectangle "$TranscribeIMG()\nAmazon Transcribe\n" as transcribe
    
    video -d-> e1: <$Callout_2> 
    e1 -[hidden]r-> mediaconvert
    mediaconvert -[hidden]r-> transcribe
    mediaconvert -u-> audio: <$Callout_3> 
    transcribe -u-> transcript: <$Callout_4> 
    
    StepFunctionsWorkflowGroup(sfw) {
      rectangle "$LambdaLambdaFunctionIMG()\nextract audio" as sfw1
      rectangle "$LambdaLambdaFunctionIMG()\ntranscribe audio" as sfw2

      e1 -r-> sfw1: Start\nExecution
      sfw1 -r-> sfw2
      sfw1 -u-> mediaconvert
      sfw2 -u-> transcribe
    }
  }
}

@enduml

The Excalidraw Libraries website () provides a lot of useful shapes. These shapes are contributed by the community.

The Render Mermaid UML Diagrams macro () uses Mermaid to render UML diagrams. It allows you to define UML diagrams in plain-text format just like Markdown.

For a live editor to draft your diagrams, please try .

The PlantUML macro () uses PlantUML to render UML diagrams. It allows you to define UML diagrams in plain-text format just like Markdown.

For a live editor to draft your diagrams, please try .

Some PlantUML diagrams requires Graphviz to be installed in the Confluence server . If you cannot install Graphviz, try adding !pragma layout smetana to the diagram content to enable the Smetana engine .

You can find more examples here . The PDF guideline can be downloaded here .

The Graphviz layout programs () take descriptions of graphs in a simple text language, and make diagrams in useful formats, such as images and SVG for web pages; PDF or Postscript for inclusion in other documents; or display in an interactive graph browser. Graphviz has many useful features for concrete diagrams, such as options for colors, fonts, tabular node layouts, line styles, hyperlinks, and custom shapes.

You can find more Graphviz examples .

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 .

Entity Relationship 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://libraries.excalidraw.com
https://mermaid-js.github.io/mermaid/#/
https://mermaidjs.github.io/mermaid-live-editor
https://plantuml.com/
http://www.plantuml.com/plantuml
https://plantuml.com/graphviz-dot
https://plantuml.com/smetana02
https://plantuml.com/
https://plantuml.com/guide
https://www.graphviz.org/
here
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/#/entityRelationshipDiagram
https://mermaid-js.github.io/mermaid/#/user-journey
https://mermaid-js.github.io/mermaid/#/gantt
https://mermaid-js.github.io/mermaid/#/pie
Excalidraw for Confluence
Excalidraw for Confluence
Excalidraw for Confluence
Excalidraw for Confluence
Excalidraw for Confluence
Excalidraw for Confluence
Excalidraw for Confluence
Excalidraw for Confluence
Excalidraw for Confluence
Excalidraw for Confluence
Excalidraw for Confluence
Excalidraw for Confluence
Mermaid UML Diagrams and Graphviz Diagrams for Confluence Cloud
Excalidraw for Confluence
Excalidraw for Confluence
Excalidraw for Confluence
Excalidraw for Confluence
Input
Render
Input
Render
Input
Render
Input
Render
Input
Render
Render
Input
Input
Render
Input
Render
Input
Render