Mermaid diagrams

<script setup lang="ts">
import { Comark } from '@comark/vue'
import mermaid, { Mermaid } from '@comark/vue/plugins/mermaid'

const markdown = `
# Mermaid Diagram Example

## Flowchart

\`\`\`mermaid
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> A
\`\`\`

## Sequence Diagram

\`\`\`mermaid {theme='zinc-dark'}
sequenceDiagram
    participant User
    participant App
    participant API
    User->>App: Request data
    App->>API: Fetch data
    API-->>App: Return data
    App-->>User: Display data
\`\`\`
`
</script>

<template>
  <Suspense>
    <Comark
      :components="{ Mermaid }"
      :plugins="[mermaid()]"
    >
      {{ markdown }}
    </Comark>
  </Suspense>
</template>

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:

   import mermaid from '@comark/mermaid'
   import { Mermaid } from '@comark/vue/plugins/mermaid/vue'
   

2. Pass the plugin to Comark:

   <Comark :plugins="[mermaid()]" />
   

3. Register the Mermaid component:

   <Comark :components="{ mermaid: Mermaid }" />
   

4. Use mermaid code blocks in your markdown:

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