# Mermaid

## Docs

- [Creating custom diagram types](https://mintlify.wiki/mermaid-js/mermaid/advanced/custom-diagrams.md): Learn how to create and register custom diagram types using Mermaid's External Diagram API
- [Error handling and debugging](https://mintlify.wiki/mermaid-js/mermaid/advanced/error-handling.md): Learn how to handle errors, debug issues, and troubleshoot problems in Mermaid diagrams
- [Integration with frameworks and tools](https://mintlify.wiki/mermaid-js/mermaid/advanced/integrations.md): Learn how to integrate Mermaid with React, Vue, Angular, and other frameworks and build tools
- [Advanced rendering options](https://mintlify.wiki/mermaid-js/mermaid/advanced/rendering-options.md): Learn about advanced rendering options, SVG manipulation, and output customization in Mermaid
- [mermaid](https://mintlify.wiki/mermaid-js/mermaid/api/mermaid.md): High-level API for rendering and parsing Mermaid diagrams
- [mermaidAPI](https://mintlify.wiki/mermaid-js/mermaid/api/mermaid-api.md): Lower-level API for internal Mermaid operations (deprecated for external use)
- [initialize()](https://mintlify.wiki/mermaid-js/mermaid/api/methods/initialize.md)
- [parse()](https://mintlify.wiki/mermaid-js/mermaid/api/methods/parse.md)
- [registerExternalDiagrams()](https://mintlify.wiki/mermaid-js/mermaid/api/methods/register-external-diagrams.md)
- [registerIconPacks()](https://mintlify.wiki/mermaid-js/mermaid/api/methods/register-icon-packs.md)
- [registerLayoutLoaders()](https://mintlify.wiki/mermaid-js/mermaid/api/methods/register-layout-loaders.md)
- [render()](https://mintlify.wiki/mermaid-js/mermaid/api/methods/render.md)
- [run()](https://mintlify.wiki/mermaid-js/mermaid/api/methods/run.md)
- [Core API overview](https://mintlify.wiki/mermaid-js/mermaid/api/overview.md): Understanding Mermaid's JavaScript API architecture and how to use it programmatically
- [MermaidConfig](https://mintlify.wiki/mermaid-js/mermaid/api/types/mermaid-config.md): Configuration interface for Mermaid diagrams
- [ParseResult](https://mintlify.wiki/mermaid-js/mermaid/api/types/parse-result.md): Result object returned by the parse function
- [RenderResult](https://mintlify.wiki/mermaid-js/mermaid/api/types/render-result.md): Result object returned by the render function
- [RunOptions](https://mintlify.wiki/mermaid-js/mermaid/api/types/run-options.md): Options for the run function to render multiple diagrams
- [Configuration](https://mintlify.wiki/mermaid-js/mermaid/concepts/configuration.md): Learn how to configure Mermaid globally and per-diagram, including configuration methods, options, and best practices.
- [Initialization](https://mintlify.wiki/mermaid-js/mermaid/concepts/initialization.md): Learn how to initialize and configure Mermaid in your application, including setup patterns for different environments.
- [Syntax overview](https://mintlify.wiki/mermaid-js/mermaid/concepts/syntax-overview.md): Learn the fundamental syntax structure of Mermaid diagrams, including diagram declarations, comments, and frontmatter configuration.
- [Theming](https://mintlify.wiki/mermaid-js/mermaid/concepts/theming.md): Learn how to customize Mermaid diagram appearance using themes, theme variables, and custom CSS.
- [Accessibility features](https://mintlify.wiki/mermaid-js/mermaid/configuration/accessibility.md): Configure accessibility options including ARIA attributes, titles, and descriptions for Mermaid diagrams.
- [Diagram directives](https://mintlify.wiki/mermaid-js/mermaid/configuration/directives.md): Learn about directives for configuring individual diagrams (deprecated in favor of frontmatter).
- [Icon support](https://mintlify.wiki/mermaid-js/mermaid/configuration/icons.md): Learn how to register and use icon packs from Iconify in your Mermaid diagrams.
- [Layout engines](https://mintlify.wiki/mermaid-js/mermaid/configuration/layouts.md): Learn about the available layout algorithms for Mermaid diagrams including ELK, dagre, and more.
- [Mathematical expressions](https://mintlify.wiki/mermaid-js/mermaid/configuration/math.md): Learn how to add mathematical expressions and formulas to Mermaid diagrams using KaTeX.
- [Setup and configuration](https://mintlify.wiki/mermaid-js/mermaid/configuration/setup.md): Learn how to configure Mermaid diagrams using initialization, frontmatter, and directives.
- [Architecture diagrams](https://mintlify.wiki/mermaid-js/mermaid/diagrams/architecture.md): Create cloud and CI/CD architecture diagrams showing services, resources, and their relationships
- [Block diagrams](https://mintlify.wiki/mermaid-js/mermaid/diagrams/block.md): Create structured block diagrams with full control over component positioning in Mermaid.
- [C4 diagrams](https://mintlify.wiki/mermaid-js/mermaid/diagrams/c4.md): Create C4 model diagrams for visualizing software architecture at different levels
- [Class diagrams](https://mintlify.wiki/mermaid-js/mermaid/diagrams/class-diagram.md): Model the structure of systems using classes, attributes, operations, and relationships
- [Entity Relationship diagrams](https://mintlify.wiki/mermaid-js/mermaid/diagrams/er-diagram.md): Model data structures and relationships between entities in a domain
- [Flowchart diagrams](https://mintlify.wiki/mermaid-js/mermaid/diagrams/flowchart.md): Create flowcharts with nodes, edges, and custom shapes to visualize processes and workflows
- [Gantt charts](https://mintlify.wiki/mermaid-js/mermaid/diagrams/gantt.md): Illustrate project schedules with tasks, durations, and dependencies
- [Git graphs](https://mintlify.wiki/mermaid-js/mermaid/diagrams/gitgraph.md): Create pictorial representations of Git commits and branching strategies with Git graph diagrams.
- [Ishikawa diagrams](https://mintlify.wiki/mermaid-js/mermaid/diagrams/ishikawa.md): Create fishbone diagrams to represent causes of a specific event or problem
- [Kanban diagrams](https://mintlify.wiki/mermaid-js/mermaid/diagrams/kanban.md): Create visual representations of tasks moving through different stages of a workflow
- [Mindmaps](https://mintlify.wiki/mermaid-js/mermaid/diagrams/mindmap.md): Create hierarchical mindmaps to organize and visualize information with Mermaid.
- [Packet diagrams](https://mintlify.wiki/mermaid-js/mermaid/diagrams/packet.md): Create visual representations of network packet structures
- [Pie charts](https://mintlify.wiki/mermaid-js/mermaid/diagrams/pie.md): Create circular statistical graphics divided into slices to illustrate numerical proportion
- [Quadrant charts](https://mintlify.wiki/mermaid-js/mermaid/diagrams/quadrant.md): Plot data points on a two-dimensional grid divided into four quadrants for analysis
- [Radar charts](https://mintlify.wiki/mermaid-js/mermaid/diagrams/radar.md): Plot multi-dimensional data in a circular format for comparison and analysis
- [Requirement diagrams](https://mintlify.wiki/mermaid-js/mermaid/diagrams/requirement.md): Visualize requirements and their relationships with requirement diagrams in Mermaid.
- [Sankey diagrams](https://mintlify.wiki/mermaid-js/mermaid/diagrams/sankey.md): Visualize flow and distribution between nodes with Sankey diagrams in Mermaid.
- [Sequence diagrams](https://mintlify.wiki/mermaid-js/mermaid/diagrams/sequence-diagram.md): Visualize how processes operate with one another and in what order using sequence diagrams
- [State diagrams](https://mintlify.wiki/mermaid-js/mermaid/diagrams/state-diagram.md): Describe the behavior of systems using states and transitions
- [Timeline diagrams](https://mintlify.wiki/mermaid-js/mermaid/diagrams/timeline.md): Create chronological timelines to visualize events and periods with Mermaid.
- [Treemap diagrams](https://mintlify.wiki/mermaid-js/mermaid/diagrams/treemap.md): Display hierarchical data as nested rectangles with proportional sizing
- [User journey diagrams](https://mintlify.wiki/mermaid-js/mermaid/diagrams/user-journey.md): Visualize user workflows and experiences with user journey diagrams in Mermaid.
- [Venn diagrams](https://mintlify.wiki/mermaid-js/mermaid/diagrams/venn.md): Show relationships between sets using overlapping circles
- [XY charts](https://mintlify.wiki/mermaid-js/mermaid/diagrams/xy-chart.md): Create bar charts and line charts with XY charts in Mermaid.
- [ZenUML sequence diagrams](https://mintlify.wiki/mermaid-js/mermaid/diagrams/zenuml.md): Create sequence diagrams using ZenUML syntax to show process interactions and order
- [Installation](https://mintlify.wiki/mermaid-js/mermaid/installation.md): Install Mermaid in your project using npm, yarn, pnpm, or CDN
- [Introduction](https://mintlify.wiki/mermaid-js/mermaid/introduction.md): Generate diagrams from markdown-like text with Mermaid
- [Quickstart](https://mintlify.wiki/mermaid-js/mermaid/quickstart.md): Create your first Mermaid diagram in under 5 minutes