# mermaid | mermaid-js | Knowledge Base | Instagit

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown

GitHub Stars: 86.2k

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

---

## Articles

### [How Mermaid's Accessibility System Generates ARIA Attributes for Screen Reader Compatibility](/mermaid-js/mermaid/mermaid-diagram-accessibility-aria-attributes)

Mermaid automatically adds ARIA attributes and hidden text to SVGs, making diagrams accessible to screen readers. Discover how this system improves chart compatibility.

- Tags: internals
- Published: 2026-02-23

### [How the startOnLoad Initialization Option Controls Automatic Diagram Rendering in Mermaid](/mermaid-js/mermaid/mermaid-startonload-option-automatic-rendering)

Discover how the Mermaid startOnLoad option controls automatic diagram rendering on page load. Learn to manage rendering with this essential JavaScript configuration.

- Tags: deep-dive
- Published: 2026-02-23

### [How to Configure Font Rendering in Mermaid Using fontFamily and altFontFamily](/mermaid-js/mermaid/configure-font-rendering-mermaid-fontfamily)

Customize Mermaid diagram fonts with fontFamily and altFontFamily. Control SVG text and canvas rendering for primary font stacks and glyph fallbacks. Learn how to optimize your typography.

- Tags: configuration
- Published: 2026-02-23

### [How to Implement Click Handlers on Nodes in Mermaid Diagrams](/mermaid-js/mermaid/implement-click-handlers-mermaid-diagram-nodes)

Learn to implement click handlers on Mermaid diagram nodes. Use the click directive to link nodes to JavaScript functions for interactive diagrams. Enhance your Mermaid workflows today.

- Tags: how-to-guide
- Published: 2026-02-23

### [Mermaid Diagram API Architecture: How diagram-orchestration.ts Orchestrates Diagram Loaders](/mermaid-js/mermaid/mermaid-diagram-api-architecture-orchestration-loaders)

Explore the Mermaid diagram API architecture in diagram-orchestration.ts. Learn how it directs diagram types to specialized loaders for efficient parsing and rendering.

- Tags: architecture
- Published: 2026-02-23

### [How to Use Mermaid Diagram Frontmatter for Per-Diagram Configuration Overrides](/mermaid-js/mermaid/mermaid-diagram-frontmatter-config-overrides)

Learn to use Mermaid diagram frontmatter to override global settings for individual diagrams with a simple YAML block. Customize your diagrams easily.

- Tags: how-to-guide
- Published: 2026-02-23

### [Understanding the darkMode Configuration Option in Mermaid: Theme Interaction and Color Recalculation](/mermaid-js/mermaid/mermaid-dark-mode-configuration-theme-interaction)

Discover how Mermaid's darkMode option recalculates colors for dark backgrounds without overriding your chosen theme. Enhance readability and learn about theme interaction.

- Tags: deep-dive
- Published: 2026-02-23

### [How to Integrate Mermaid into a React Component Using the Promise-Based API](/mermaid-js/mermaid/integrate-mermaid-react-component-render-promise)

Integrate Mermaid into React using the promise-based API. Learn to render SVGs asynchronously with useEffect, manage loading, and use dangerouslySetInnerHTML.

- Tags: how-to-guide
- Published: 2026-02-23

### [How Mermaid’s maxTextSize and maxEdges Configuration Settings Prevent Resource Exhaustion from Malicious Diagrams](/mermaid-js/mermaid/mermaid-prevent-resource-exhaustion-max-text-edges)

Learn how Mermaid's maxTextSize and maxEdges settings prevent resource exhaustion and denial-of-service attacks from large or malicious diagrams by enforcing input limits.

- Tags: security
- Published: 2026-02-23

### [Mermaid handDrawn Look Option: How to Enable Sketch-Style Diagrams with Deterministic Rendering](/mermaid-js/mermaid/mermaid-hand-drawn-look-and-seed-consistency)

Enable Mermaid handDrawn diagrams for a sketch-like style. Learn how handDrawnSeed ensures consistent randomized rendering for reproducible jitter patterns.

- Tags: deep-dive
- Published: 2026-02-23

### [How Mermaid Handles Parsing Errors: ParseErrorFunction and DetailedError Types Explained](/mermaid-js/mermaid/mermaid-error-handling-parsing-rendering)

Discover how Mermaid handles parsing errors with ParseErrorFunction and DetailedError types. Intercept syntax errors and get structured error objects for custom handling during diagram rendering.

- Tags: internals
- Published: 2026-02-23

### [Fine-Tuning Mermaid Graph Layout with ELK Options: mergeEdges, forceNodeModelOrder, and considerModelOrder](/mermaid-js/mermaid/fine-tune-mermaid-elk-graph-layout-options)

Learn to fine-tune Mermaid graph layouts with ELK options like mergeEdges, forceNodeModelOrder, and considerModelOrder. Control edge bundling and node ordering for better diagrams globally or per-diagram.

- Tags: how-to-guide
- Published: 2026-02-23

### [How Mermaid's detectType.ts Diagram Detection System Works and How to Register Custom Detectors](/mermaid-js/mermaid/mermaid-diagram-detection-custom-detectors)

Explore Mermaid's detectType.ts diagram detection system. Learn how it matches diagrams and how to register custom detectors to extend its capabilities.

- Tags: internals
- Published: 2026-02-23

### [How Mermaid `%%{initialize: {...}}%%` Directives Work and What Runtime Settings They Configure](/mermaid-js/mermaid/mermaid-directives-initialization-runtime-settings)

Learn how Mermaid directives like %{initialize: ...}% inject runtime configuration for per-diagram theming logging and layout controls directly into your diagram definitions.

- Tags: internals
- Published: 2026-02-23

### [How to Use themeCSS and themeVariables to Override Default Themes in Mermaid](/mermaid-js/mermaid/customize-mermaid-themes-with-theme-css-variables)

Learn to override Mermaid default themes using themeCSS and themeVariables. Customize colors, fonts, and target SVG elements for unique diagrams.

- Tags: how-to-guide
- Published: 2026-02-23

### [How to Use `mermaid.run()` to Programmatically Render Multiple Diagrams with Custom RunOptions](/mermaid-js/mermaid/programmatically-render-multiple-mermaid-diagrams-run)

Learn to use mermaid.run() to programmatically render multiple diagrams. Customize options for DOM selection, error handling with suppressErrors, and post-render callbacks in Mermaid JS.

- Tags: how-to-guide
- Published: 2026-02-23

### [ELK Layout Algorithm in Mermaid: Configuring Node Placement and Cycle-Breaking Strategies](/mermaid-js/mermaid/configure-elk-layout-strategy-in-mermaid)

Explore the ELK layout algorithm in Mermaid. Learn to configure node placement and cycle breaking strategies for optimal diagram rendering. Master your layouts today.

- Tags: deep-dive
- Published: 2026-02-23

### [How to Create a Custom Diagram Type in Mermaid Using `registerLazyLoadedDiagrams` and `addDetector`](/mermaid-js/mermaid/create-custom-mermaid-diagram-type)

Learn to create custom Mermaid diagram types. Implement syntax detection with addDetector and load rendering logic using registerLazyLoadedDiagrams before initializing Mermaid.

- Tags: how-to-guide
- Published: 2026-02-23

### [How the Mermaid securityLevel Configuration Impacts Diagram Rendering and XSS Protection](/mermaid-js/mermaid/mermaid-security-level-impact-and-considerations)

Explore Mermaid's securityLevel effects on diagram rendering and XSS protection. Understand 'strict', 'loose', 'antiscript', and 'sandbox' options to secure your applications.

- Tags: deep-dive
- Published: 2026-02-23