Mermaid export demo

This repository includes a runnable playground demo that shows how to intercept the export event from MermaidBlockNode and upload the serialized SVG (ev.svgString).

Playground route: /mermaid-export-demo
File: playground/src/pages/mermaid-export-demo.vue

Why use this demo?

Demonstrates how to use setCustomComponents to override the mermaid renderer inside MarkdownRender.
Shows how to intercept export and use ev.svgString (or ev.svgElement) to upload or send the SVG to an API.

Try it: run the playground and visit the route /mermaid-export-demo.

Try it locally — runnable example

You can copy the following single-file component into your app or into the playground to try the export handler immediately. It demonstrates a minimal setCustomComponents override that intercepts the export event and posts the serialized SVG string to a (fake) API.

vue

<script setup lang="ts">
import { setCustomComponents } from 'markstream-vue'
import MermaidBlockNode from 'markstream-vue/src/components/MermaidBlockNode'
import { h } from 'vue'

// minimal uploader helper (replace with real upload)
async function uploadSvgToServer(svgString: string) {
  // Example: POST to an API endpoint
  // await fetch('/api/upload', { method: 'POST', body: svgString })
  return `https://example.com/uploads/mermaid-${Date.now()}.svg`
}

setCustomComponents('my-demo', {
  mermaid: (props: any) => h(MermaidBlockNode, {
    ...props,
    // intercept export events (prevent default and upload svgString)
    onExport: async (ev: any) => {
      ev.preventDefault()
      const svg = ev.svgString ?? (ev.svgElement ? new XMLSerializer().serializeToString(ev.svgElement) : null)
      if (!svg) {
        console.warn('no svg available on export')
        return
      }
      const url = await uploadSvgToServer(svg)
      // Show uploaded URL or persist as needed
      console.log('uploaded svg to', url)
    },
  })
})

const md = `
\`\`\`mermaid
graph LR
  A[User] --> B[Server]
  B --> C[Storage]
\`\`\`
`
</script>

<template>
  <MarkdownRender custom-id="my-demo" :content="md" />
</template>

Run this in the repo playground with:

bash

pnpm play
# open http://localhost:5173/mermaid-export-demo or navigate to the route in the playground

Live demo (embedded)

You can try the demo right inside the docs site — if the demo is hosted at the public playground URL this iframe will load it (or run the playground locally and open the route):

If the demo shows a blank or black iframe, the remote site may disallow embedding (X-Frame-Options/CSP) or the demo may be offline. Try one of these:

Open the demo in a new tab
Run the playground locally with pnpm play and visit /mermaid-export-demo
Import the playground into CodeSandbox using the link below to edit and run the demo inline

<!-- Visual fallback: a representative screenshot stored in docs public assets -->
<div style="margin-top:0.75rem; border:1px solid rgba(0,0,0,0.06); border-radius:6px; overflow:hidden; max-width:680px;">
  <img src="/screenshots/mermaid-demo.svg" alt="Mermaid export demo screenshot" style="width:100%; display:block; background:#fff" />
  <div style="padding:0.5rem 0.75rem; font-size:0.85rem; color:var(--vp-c-muted);">Preview: Mermaid export demo (run locally if the iframe is blocked)</div>
</div>

Open in CodeSandbox

If you'd like to edit this demo in a web-based environment, import the repo into CodeSandbox (GitHub import) and open the playground folder. Example URL (edit as needed):

Open the playground in CodeSandbox (GitHub import)

CodeSandbox (live editable)

Edit and run the playground in CodeSandbox — open in a new tab if you prefer the full editor experience: Open playground in CodeSandbox

Mermaid export demo ​

Mermaid export demo