BoosAPI/desktop/libs/markstream-vue/docs/zh/guide/mermaid-export-demo.md

Mermaid 导出示例

仓库包含一个可运行的 playground 示例，展示如何拦截 MermaidBlockNode 的 export 事件并上传序列化的 SVG（ev.svgString）。

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

• Playground 路由: /mermaid-export-demo
• 文件: playground/src/pages/mermaid-export-demo.vue

为什么要看这个示例？

• 演示如何使用 setCustomComponents 在 MarkdownRender 中替换 mermaid 渲染器。
• 展示如何拦截 export 并使用 ev.svgString（或 ev.svgElement）上传或发送 SVG 到 API。

试试：运行 playground 并访问路由 /mermaid-export-demo。

可复制运行示例

以下是一个可直接复制到项目或 playground 的单文件组件示例（SFC）。它展示了如何通过 setCustomComponents 覆盖 mermaid 渲染器、拦截 export 事件并上传 ev.svgString。

<script setup lang="ts">
import MarkdownRender, { MermaidBlockNode, setCustomComponents } from 'markstream-vue'
import { h } from 'vue'

async function uploadSvgToServer(svgString: string) {
  // 这里替换为真实上传逻辑
  // 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,
    onExport: async (ev: any) => {
      ev.preventDefault()
      const svg = ev.svgString ?? (ev.svgElement ? new XMLSerializer().serializeToString(ev.svgElement) : null)
      if (!svg) {
        console.warn('未能获取 svg 数据')
        return
      }
      const url = await uploadSvgToServer(svg)
      console.log('svg 已上传到', url)
    },
  })
})

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

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

在仓库 playground 中运行：

pnpm play
# 打开 http://localhost:5173/mermaid-export-demo

实时演示（内嵌）

如果官方 playground 有托管，下面的 iframe 会直接加载示例（也可以在本地运行 playground 并打开该路由）：

如果内嵌框（iframe）显示为空白或黑色，远端托管站点可能不允许被嵌入（X-Frame-Options/CSP）或示例站点离线。 你可以尝试：

• 在新标签页打开演示
• 在本地运行 playground：pnpm play，然后访问 /mermaid-export-demo
• 使用下面的 CodeSandbox 链接把 playground 导入到在线编辑器并运行

<!-- 视觉预览：使用仓库 docs 的公共截图资源 -->
<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 导出示例预览" style="width:100%; display:block; background:#fff" />
  <div style="padding:0.5rem 0.75rem; font-size:0.85rem; color:var(--vp-c-muted);">预览：Mermaid 导出示例（如果 iframe 阻止嵌入，请在本地运行查看）</div>
</div>

在 CodeSandbox 中打开

如果希望在 web 编辑器中修改并测试，可以导入仓库到 CodeSandbox（GitHub 导入）并打开 playground 文件夹：

CodeSandbox（在线可编辑）

在 CodeSandbox 中编辑并运行 playground — 如果需要完整编辑器体验，也可以在新标签页打开： 在 CodeSandbox 中打开 playground

在 CodeSandbox 中打开 playground（GitHub 导入）