Skip to main content

21 posts tagged with "Mermaid"

Mermaid diagram syntax, templates, and tutorials

View All Tags

How to Create Mermaid Diagrams on Jira Issues (Step-by-Step Tutorial)

· 18 min read
NGPilot
NGPilot

Jira issues are where your team tracks bugs, features, and tasks every day. But describing complex processes, API interactions, or system designs in plain text often leads to confusion and misalignment. Mermaid Plus Diagrams for Jira solves this by letting you create and embed Mermaid diagrams directly on any Jira issue, so the visual context lives exactly where the work happens. No external tools, no attached images that go stale, no switching between tabs.

How to Create Mind Maps in Confluence with Mermaid

· 12 min read
NGPilot
NGPilot

Mind maps are one of the most effective ways to capture ideas, organize thoughts, and brainstorm with a team. Unlike linear notes or bullet lists, mind maps radiate outward from a central topic, making it easy to see relationships between concepts at a glance. If your team already uses Confluence for documentation, meeting notes, and project planning, adding mind maps directly to your Confluence pages keeps brainstorming sessions alongside the rest of your team's knowledge.

In this tutorial, you will learn how to create mind maps in Confluence using Mermaid syntax and the Mermaid Plus for Confluence app. Every example is copy-paste ready, so you can drop it straight into a Confluence page and start organizing your ideas immediately.

How to Create Pie Charts and Data Visualizations in Confluence with Mermaid

· 18 min read
NGPilot
NGPilot

Pie charts are one of the simplest and most effective ways to communicate proportional data. Whether you are reporting survey results, breaking down a project budget, or showing how your team allocates time across activities, a pie chart turns a list of numbers into a visual that anyone can read in seconds. Confluence is where your team already stores reports, retrospectives, and planning documents, so embedding pie charts directly on those pages keeps your data alongside the context that explains it.

With Mermaid Plus for Confluence, you can create pie charts and other data visualizations using plain text syntax. No image exports, no spreadsheet screenshots, no broken attachments. You write the code once, and the chart renders directly on the Confluence page, updating whenever you edit the underlying data.

How to Create Sequence Diagrams in Confluence (Mermaid Examples)

· 11 min read
NGPilot
NGPilot

Sequence diagrams are one of the most practical tools in a software team's documentation toolkit. They show how objects, services, or actors interact over time, making them ideal for documenting API flows, authentication processes, microservice choreography, and error-handling logic. If your team uses Confluence for documentation, embedding sequence diagrams directly on your pages keeps architecture docs alongside everything else your team needs.

In this tutorial, you will learn how to create sequence diagrams in Confluence using Mermaid syntax. Every example is copy-paste ready, so you can drop it straight into a Confluence page and see the result immediately.

How to Create State Diagrams in Confluence (Mermaid Examples)

· 17 min read
NGPilot
NGPilot

State diagrams (also called state machine diagrams) model how a system transitions between discrete states in response to events. They are essential for documenting order lifecycles, user authentication flows, CI/CD pipelines, IoT device behavior, and any system where the current state determines what happens next. If your team uses Confluence for technical documentation, embedding state diagrams directly on your pages keeps your design decisions alongside runbooks, architecture decision records, and sprint planning notes.

In this tutorial, you will learn how to create state diagrams in Confluence using the Mermaid stateDiagram-v2 syntax. Every example is copy-paste ready, so you can drop it straight into a Confluence page and see the rendered result immediately.

Confluence Diagram Tool: Mermaid vs Excalidraw vs Graphviz (2026)

· 4 min read
NGPilot
NGPilot

Choosing the right diagram tool for Confluence depends on what you need to draw and how you prefer to work. This guide compares three NGPILOT apps — Mermaid Plus for Confluence, Excalidraw plus Whiteboards for Confluence, and Excalidraw & Mermaid Diagrams for Confluence — so you can pick the best fit.

Diagram Apps for Jira — Which Diagramming Tool Should Your Team Use?

· 7 min read
NGPilot
NGPilot

Every engineering team needs diagrams in Jira — architecture decisions on epics, bug reproduction flows on tickets, wireframes on stories. But Jira has no built-in diagramming. You either paste screenshots from external tools or install a marketplace app.

We built two diagram apps for Jira: Mermaid+ Diagrams for Jira for text-based diagrams using Mermaid syntax (flowcharts, sequence diagrams, ER models, C4 architecture), and Excalidraw Diagrams + Whiteboards for Jira for freeform drawing with 229 built-in shape libraries. In this post we compare both against every alternative on the Atlassian Marketplace.