DOCSEARCHbyAlgolia
Submit Docs

Mermaid: JavaScript-based Diagramming and Charting Tool

repository·develop·Indexed Apr 15, 2026

https://github.com/mermaid-js/mermaid

Mermaid is a JavaScript-based tool that renders diagrams and charts from Markdown-like text syntax. It supports flowcharts, sequence diagrams, Gantt charts, C4 diagrams, class diagrams, Git graphs, ERDs, user journeys, quadrant charts, and pie charts. Designed to keep documentation synchronized with code, it allows dynamic modification of diagrams within web applications, documentation sites, and production scripts. Features include a live editor at mermaid.live, npm installation, and integration with GitHub and various frameworks. Developers can extend functionality by adding custom SVG shapes or new diagram types using Langium.

Tokens
24.2K
Snippets
69
Records
127
Agent score
100%

What's inside mermaid

  1. What is Mermaid

    develop

    Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions to create and modify complex diagrams. It is designed to solve 'Doc-Rot' by allowing diagrams to be easily modifiable as text, making them version-control friendly and easy to integrate into production scripts or documentation workflows.

    Key benefits include:

    • Text-to-Diagram: No drag-and-drop design tools required; diagrams are generated from code.
    • Version Control Friendly: Since diagrams are text, they work seamlessly with git diffs and code reviews.
    • Native Rendering: Supported natively by GitHub and many other applications.
    • Extensive Support: Over 20 diagram types including Flowchart, Sequence, Class, State, ER, Gantt, Pie, Git Graph, Mindmap, Timeline, and Sankey.

  4. Explore Mermaid community integrations

    develop

    Mermaid is supported by a wide range of community-driven plugins and integrations across various platforms. These allow you to render diagrams directly within your existing workflows, editors, and documentation tools.

    Key categories of integrations include:

    • Productivity & DevOps: Atlassian (Confluence, Jira), Azure DevOps, GitHub, GitLab, and JetBrains IDEs.
    • Knowledge Management & Wikis: Notion, Obsidian, Confluence, DokuWiki, and MediaWiki.
    • LLM & AI: Tools like MCP Server Mermaid and Mermaid Studio that allow generating diagrams from text descriptions using AI.
    • Blogging & CMS: Hexo, Nextra, WordPress, Astro, and Docusaurus.
    • Editors: VS Code, Vim, Emacs, and various Markdown editors.
    • Browser Extensions: Extensions for Chrome, Firefox, Edge, and Opera to preview Mermaid diagrams on web pages like GitHub.

    A ✅ symbol in the integration lists indicates Native support for Mermaid on that platform.

  5. Use C4 Diagrams in Mermaid

    develop

    Mermaid supports C4 diagrams, which are used to visualize software architecture. The syntax is compatible with PlantUML's C4-PlantUML.

    Note: C4 diagrams are currently experimental. The syntax and properties may change in future releases.

    There are 5 supported chart types:

    • System Context (C4Context)
    • Container diagram (C4Container)
    • Component diagram (C4Component)
    • Dynamic diagram (C4Dynamic)
    • Deployment diagram (C4Deployment)
    C4Context
  title System Context diagram
  Person(customer, "Customer")
  System(system, "System")
  Rel(customer, system, "Uses")

  7. About Mermaid

    develop
    Mermaid is a JavaScript-based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. It helps documentation stay synchronized with code by allowing users to define diagrams using text, solving the problem of "Doc-Rot" (documentation becoming outdated).

  8. Tidy Tree Layout algorithm overview

    develop

    The Tidy Tree layout algorithm provides a bidirectional approach for positioning nodes and edges in tree structures. It creates a balanced, symmetric layout by splitting children between two trees that grow in opposite directions from a central root.

    Layout Structure:

    [Child 3] ← [Child 1] ← [Root] → [Child 2] → [Child 4]
    ↓           ↓                     ↓           ↓
[GrandChild]  [GrandChild]      [GrandChild]  [GrandChild]

    Key Features:

    • Alternates root children between left and right trees
    • Left tree grows horizontally to the left (rotated 90° counterclockwise)
    • Right tree grows horizontally to the right (rotated 90° clockwise)
    • Uses tidy-tree algorithm for optimal spacing within each tree
    • Creates symmetric, balanced layouts
    • Maintains proper edge connections between all nodes

    Compatibility: The algorithm follows the unified rendering pattern and can be used by any diagram type that provides compatible LayoutData. It is particularly effective for:

    • Mindmaps
    • Organizational charts
    • Hierarchical tree diagrams

    Exported API: The package exports the following for programmatic use:

    • render: Main render function for the bidirectional tidy-tree layout
    • LayoutData: Type definition for layout data containing nodes, edges, and configuration
    • layout: Core layout function
    • types: Type definitions for the layout system

    Sources: packages/mermaid-layout-tidy-tree/src/index.ts

  9. Explore Mermaid Chart features and plugins

    develop

    Mermaid Chart is a professional suite built on top of the Mermaid open source project. It provides several tools for diagramming and visual collaboration:

    • Editor: A web-based interface for creating and editing Mermaid diagrams.
    • Mermaid AI: An embedded AI Chat that generates diagrams from natural language descriptions.
    • Whiteboard: A virtual whiteboard for diagram creation and editing.
    • Collaboration: Real-time multi-user editing (available on Pro and Enterprise plans).
    • Comments & Presentations: Features for adding comments to diagrams and viewing them in slideshow format.

    Official Plugins

    You can extend Mermaid functionality using official plugins for various platforms:

  10. About Mermaid

    develop

    Mermaid is a JavaScript-based diagramming and charting tool that renders Markdown-inspired text definitions into dynamic visualizations. It is designed to solve the problem of 'Doc-Rot' by allowing developers to create easily modifiable diagrams that can be integrated into production scripts and documentation workflows.

    Key features include:

    • Text-to-Diagram: Create complex diagrams using a simple, Markdown-like syntax.
    • Dynamic Rendering: Diagrams can be modified and rendered on the fly.
    • Integration: Works with various applications and can be part of automated build processes.
    • Accessibility: Non-programmers can use the Mermaid Live Editor to create diagrams without writing code.

  12. Configure Mermaid using Variables and Functions

    develop

    Mermaid's configuration can be managed through a set of global variables and functions.

    Variables

    • defaultConfig: Contains the default configuration settings for Mermaid.

    Functions

    To programmatically control the configuration, use the following functions:

    • addDirective: Adds a directive to the configuration.
    • evaluate: Evaluates configuration expressions.
    • getConfig: Retrieves the current configuration.
    • getEffectiveHtmlLabels: Retrieves the effective HTML labels.
    • getSiteConfig: Retrieves the site-specific configuration.
    • getUserDefinedConfig: Retrieves the configuration defined by the user.
    • reset: Resets the configuration to its default state.
    • sanitize: Sanitizes configuration input.
    • saveConfigFromInitialize: Saves the configuration from an initialization step.
    • setSiteConfig: Sets the site-specific configuration.
    • updateSiteConfig: Updates the site-specific configuration.

    Note: setConfig is currently deprecated or marked for removal.