Skip to main content

50 posts tagged with "mermaid"

View All Tags

Mermaid Sequence Diagrams in Confluence: FAQ & Examples

· 17 min read

Sequence diagrams are one of the most widely used diagram types in software documentation. They show exactly how participants -- users, services, databases, external APIs -- exchange messages over time. For Confluence teams, embedding sequence diagrams directly on wiki pages means architecture docs, API specifications, and incident post-mortems stay in one place instead of scattered across external tools.

Mermaid's text-based syntax makes sequence diagrams fast to write and easy to update, but the syntax has its own set of rules that can trip you up. This FAQ answers the questions Confluence users ask most often about building sequence diagrams with Mermaid, with expanded explanations, working code examples, and copy-paste templates you can drop straight into a Mermaid Plus macro.

All 30 Mermaid Diagram Types in Confluence: Complete Reference

· 21 min read

Mermaid supports 30 diagram types — from flowcharts and sequence diagrams to C4 architecture, swimlanes, Gantt charts, ER diagrams, git graphs, and more. With Mermaid Plus Diagrams & AI Agent for Confluence, all 30 render from plain text inside a single macro. This page is the complete reference: every type, its keyword, its category, when to use it, and worked examples for the ones a software team reaches for most.

What you'll find here

If you are deciding which diagram type fits your use case, jump to When to use each Mermaid diagram type. For the quick reference table, see below. For installation and the macro basics, see Create Mermaid diagrams in Confluence.

Documenting Microservice Architectures in Confluence with Mermaid

· 14 min read

Mermaid is the most popular text-based diagramming language for technical documentation. One line of code generates a flowchart. A few more produce a sequence diagram, ER diagram, or Gantt chart. Teams using Confluence can embed Mermaid diagrams directly on their pages, keeping diagrams alongside the documentation they illustrate.

Who should read this
  • Platform/backend engineers documenting a microservice architecture
  • Tech leads keeping architecture docs in sync with code
  • Anyone who wants a copy-paste Mermaid syntax reference for Confluence

How to Create Architecture Diagrams in Confluence (3 Methods with Examples)

· 14 min read

Architecture diagrams are the backbone of technical documentation. They show how services communicate, where data flows, and which infrastructure components underpin your system. When a new engineer joins your team, the first thing they look for is an architecture diagram. When something breaks in production, the incident response starts at the same diagram.

Yet many teams store their architecture diagrams in external tools -- draw.io, Lucidchart, or even desktop applications -- detached from the documentation where they matter most. Confluence is where your runbooks live, where architecture decision records are written, and where post-mortem discussions happen. Keeping your architecture diagrams inside Confluence eliminates context-switching and ensures diagrams evolve alongside the written documentation they illustrate.

This guide walks through three ways to create architecture diagrams directly in Confluence, using NGPILOT apps designed for different workflows. Every Mermaid example is copy-paste ready, so you can insert it into a Confluence page and see the result immediately.

Create UML Class Diagrams in Confluence — Free with Mermaid

· 16 min read

Class diagrams are the standard way to model object-oriented systems. They show the classes in your codebase, their attributes and methods, and the relationships between them -- inheritance hierarchies, composition, aggregation, and simple associations. Whether you are documenting a domain model, onboarding new engineers onto a codebase, or collaborating on a design before writing a single line of code, a UML class diagram communicates structure faster than paragraphs of prose.

If your team uses Confluence for technical documentation, embedding class diagrams directly on your pages keeps your design docs next to your architecture decisions, runbooks, and sprint planning notes. With Mermaid Plus Diagrams & AI Agent for Confluence, you can write class diagrams in plain text and render them instantly, no external drawing tool required.

ER Diagrams in Confluence: How to Add, Create, and Render Database Schemas

· 21 min read

An ER diagram (entity-relationship diagram) visualizes a database schema — the tables, columns, primary and foreign keys, and the relationships between them. If your team documents data models, API contracts, or system architecture in Confluence, embedding ER diagrams directly on the page keeps the schema next to the prose instead of stranded in an external tool as a stale screenshot.

Confluence has no built-in ER diagram support, so you add it with a Marketplace app. The approach below uses Mermaid Plus Diagrams & AI Agent for Confluence, which renders ER diagrams from plain text — meaning diagrams version, diff, and search alongside the rest of your documentation.

What you'll learn
  1. How to add an ER diagram to any Confluence page
  2. The full Mermaid erDiagram syntax — entities, attributes, key types, cardinality
  3. Three copy-paste examples (library, e-commerce, SaaS multi-tenant)
  4. Common mistakes and how to fix them

Entity-Relationship (ER) diagrams are the standard way to visualize database schemas. They show the tables in your database, the columns in each table, primary and foreign key constraints, and the relationships between tables -- one-to-one, one-to-many, and many-to-many. Whether you are designing a new database from scratch, documenting an existing schema for onboarding, or collaborating on a data model before writing migration scripts, an ER diagram communicates structure faster than any amount of prose.

How to Create Gantt Charts in Confluence — Mermaid Examples

· 15 min read

Gantt charts are one of the most widely used visual tools in project management. They give teams a clear, time-based view of who is doing what, when tasks start and end, and how dependencies chain together across a project lifecycle. Whether you are planning a software release, coordinating a marketing campaign, or managing a sprint backlog, a Gantt chart turns a flat task list into a timeline your whole team can read at a glance.

Confluence is where many teams already store their project documentation, meeting notes, and decision records. Embedding Gantt charts directly on Confluence pages keeps your project visuals alongside the context your team needs, instead of burying timelines in a separate project management tool that nobody checks. With Mermaid Plus Diagrams & AI Agent for Confluence, you can write Gantt charts using plain text syntax and see them rendered instantly on the page.

Create Mermaid Diagrams on Jira Issues — Flowcharts, Sequence & More

· 18 min read

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.