---
title: "Mermaid diagrams"
description: "Example showing how to use Comark with Mermaid diagrams in Vue and Vite."
canonical_url: "https://comark.dev/examples/plugins/vue-vite-mermaid"
---
# Mermaid diagrams

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

<code-explorer org="comarkdown" repo="comark@81a416b278b0f304d7e7577c7ac6bbfc78414790" path="examples/3.plugins/vue-vite-mermaid" defaultValue="src/App.vue"></code-explorer>

## Features

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

- **Mermaid Plugin**: Import and configure `@comark/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, and all other Mermaid diagram types
- **Configurable**: Customize theme, width, and height via component props

## Usage

1. Import the mermaid plugin and component:
   ```ts
   import mermaid, { Mermaid } from '@comark/vue/plugins/mermaid'
   ```
2. Pass the plugin and component to `Markdown`:
   ```vue
   <Markdown :plugins="[mermaid()]" :components="{ mermaid: Mermaid }" />
   ```
3. Use mermaid code blocks in your markdown:
   ~~~markdown
   ```mermaid
   graph TD
       A[Start] --> B[End]
   ```
   ~~~


## Sitemap

See the full [sitemap](https://comark.dev/sitemap.md) for all pages.