Mermaid diagrams

Example showing how to use Comark with Mermaid diagrams in React and Vite.

Select a file to view its contents

Features

This example demonstrates how to use Comark with Mermaid diagrams in React:

Mermaid Plugin: Import and configure the mermaid plugin to parse mermaid code blocks
Mermaid Component: Register the Mermaid component to render diagrams as SVG
Multiple Diagram Types: Supports flowcharts, sequence diagrams, class diagrams, and all other Mermaid diagram types
Configurable: Customize theme, width, and height via component props

Install dependencies:

npm install @comark/react beautiful-mermaid

Import the mermaid plugin and component:

import { Comark } from '@comark/react'
import mermaid, { Mermaid } from '@comark/react/plugins/mermaid'

Pass the plugin and component to Comark:

<Comark
  markdown={content}
  components={{ Mermaid }}
  plugins={[mermaid()]}
/>

Use mermaid code blocks in your markdown:

```mermaid
graph TD
    A[Start] --> B[End]
```

Pass a theme via the code block info string:

```mermaid {theme='zinc-dark'}
sequenceDiagram
    participant A
    participant B
    A->>B: Hello
```

Math formulas

Example showing how to use Comark with LaTeX math formulas in React and Vite.

Binding (frontmatter + data)

Example showing how to interpolate frontmatter and runtime data into Markdown using the Comark `binding` plugin in Vue and Vite.