Core Plugins
Mermaid Diagrams
Plugin for rendering Mermaid diagrams in Comark using code blocks.
The Mermaid plugin enables rendering of Mermaid diagrams in your markdown content. Mermaid lets you create diagrams and visualizations using text and code.
The plugin is part of the core comark package. Install the beautiful-mermaid peer dependency:
npm install beautiful-mermaid
pnpm add beautiful-mermaid
yarn add beautiful-mermaid
bun add beautiful-mermaid
Basic Usage
With Vue
<script setup lang="ts">
import { Comark } from '@comark/vue'
import mermaid from '@comark/vue/plugins/mermaid'
import { Mermaid } from '@comark/vue/plugins/mermaid'
const markdown = `
\`\`\`mermaid
graph TD
A[Start] --> B[End]
\`\`\`
`
</script>
<template>
<Suspense>
<Comark
:components="{ mermaid: Mermaid }"
:plugins="[mermaid()]"
>{{ markdown }}</Comark>
</Suspense>
</template>
With React
import { Comark } from '@comark/react'
import mermaid from '@comark/react/plugins/mermaid'
import { Mermaid } from '@comark/react/plugins/mermaid'
const markdown = `
\`\`\`mermaid
graph TD
A[Start] --> B[End]
\`\`\`
`
function App() {
return (
<Comark
components={{ mermaid: Mermaid }}
plugins={[mermaid()]}
>{markdown}</Comark>
)
}
With Svelte
App.svelte
<script lang="ts">
import { Comark } from '@comark/svelte'
import mermaid, { Mermaid } from '@comark/svelte/plugins/mermaid'
const markdown = `
\`\`\`mermaid
graph TD
A[Start] --> B[End]
\`\`\`
`
</script>
<Comark {markdown} components={{ mermaid: Mermaid }} plugins={[mermaid()]} />
With Parse API
import { parse } from 'comark'
import mermaid from 'comark/plugins/mermaid'
const result = await parse(`
\`\`\`mermaid
graph TD
A --> B
\`\`\`
`, {
plugins: [mermaid()]
})
Diagram Types
Mermaid supports many diagram types:
Flowcharts
```mermaid
graph TD
A[Start] --> B{Is it working?}
B -->|Yes| C[Great!]
B -->|No| D[Debug]
D --> A
```
Sequence Diagrams
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>Bob: Hello Bob!
Bob-->>Alice: Hello Alice!
```
Class Diagrams
```mermaid
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal : +int age
Animal : +String gender
Animal: +isMammal()
```
State Diagrams
```mermaid
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
Gantt Charts
```mermaid
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Planning
Task 1 :a1, 2024-01-01, 30d
Task 2 :after a1, 20d
```
Pie Charts
```mermaid
pie title Pets
"Dogs" : 386
"Cats" : 85
"Rats" : 15
```
Git Graphs
```mermaid
gitGraph
commit
branch develop
checkout develop
commit
checkout main
merge develop
```
ER Diagrams
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
Journey Diagrams
```mermaid
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
section Work
Do work: 1: Me, Cat
```
Configuration
Component Props
Both Vue and React Mermaid components accept these props:
| Prop | Type | Default | Description |
|---|---|---|---|
content | string | required | The Mermaid diagram code |
class | string | '' | CSS classes for styling |
theme | string | 'default' | Mermaid theme |
themeDark | string | undefined | Mermaid theme for dark mode |
width | string | '100%' | Container width |
height | string | '400px' | Container height |
Example with props:
<Mermaid
:content="diagramCode"
theme="dark"
width="800px"
height="600px"
/>
You can also pass component props directly using special code block syntax.
```mermaid {width="800px" height="800px" theme="dark"}
graph TD
start[Start Process] --> check{Check Status}
check -->|Pass| success[Success]
check -->|Fail| retry[Retry]
```
You can see the list of available themes here.
Examples
See the Mermaid example for a complete working implementation.
Resources
Related
- Parse API - Main parsing API
- Vue Rendering - Using with Vue
- React Rendering - Using with React