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
  • Mermaid UML Diagrams Macro
  • PlantUML Diagrams Macro
  • Graphviz Diagrams Macro
  • Examples
  • Flowchart
  • Sequence diagram
  • Class diagram
  • State diagram
  • Entity Relationship diagram
  • User Journey
  • Gantt chart
  • Pie chart
  • Graphviz

Was this helpful?

  1. Whiteboarding and Diagramming
  2. PlantUML, Mermaid UML, Graphviz: UML Diagrams for Confluence
  3. Confluence Cloud

Usage

PreviousOverviewNextSupport

Last updated 2 years ago

Was this helpful?

Mermaid UML Diagrams Macro

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 .

In the Confluence editor, open the Select macro dialog. The macro name is Render Mermaid UML Diagrams.

Alternatively, type / (slash) and select the 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!

While editing, you can click Show preview to see the result. You can also click Full Screen Editor to open the Mermaid editor that will help you design new diagrams easily.

Save the page, and the UML diagram will be rendered.

PlantUML Diagrams Macro

In the Confluence editor, open the Select macro dialog. The macro name is Render PlantUML Diagrams.

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

@startuml C4_Elements
!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

Save the macro, and the UML diagram will be rendered.

Graphviz Diagrams Macro

In the Confluence editor, open the Select macro dialog. The macro name is Render Graphviz Diagrams.

Select the macro, then click Insert.

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

Save the page, and the Graphviz diagram will be rendered.

Examples

Flowchart

Sequence diagram

Class diagram

State diagram

Entity Relationship diagram

User Journey

Gantt chart

Pie chart

Graphviz

This diagram is rendered with Graphviz.

The Render PlantUML Diagrams 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 .

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://plantuml.com/
http://www.plantuml.com/plantuml
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
https://mermaid-js.github.io/mermaid/#/
https://mermaidjs.github.io/mermaid-live-editor
Mermaid UML Diagrams and Graphviz Diagrams for Confluence Cloud
Mermaid UML Diagrams and Graphviz Diagrams for Confluence Cloud
Mermaid UML Diagrams and Graphviz Diagrams for Confluence Cloud
Mermaid UML Diagrams and Graphviz Diagrams for Confluence Cloud
Mermaid UML Diagrams and Graphviz Diagrams for Confluence Cloud
UML for Confluence
UML for Confluence
Mermaid UML Diagrams and Graphviz Diagrams for Confluence Cloud
Mermaid UML Diagrams and Graphviz Diagrams for Confluence Cloud
Mermaid UML Diagrams and Graphviz Diagrams for Confluence Cloud
Mermaid UML Diagrams and Graphviz Diagrams for Confluence Cloud
Input
Render
Input
Render
Input
Render
Input
Render
Input
Render
Render
Input
Input
Render
Input
Render
Input
Render