MermaidBlock

MermaidBlock 使用 Mermaid 渲染流程图、时序图等图表内容。

导入方式

按需导入

import { MermaidBlock } from '@weimin96/ai-chat-vue'
import '@weimin96/ai-chat-vue/styles'

完整导入

import * as AiChatVue from '@weimin96/ai-chat-vue'
import '@weimin96/ai-chat-vue/styles'

app.use(AiChatVue)

// 模板中可直接使用 <MermaidBlock />

基础用法

<script setup lang="ts">
import { MermaidBlock } from '@weimin96/ai-chat-vue'

const code = `flowchart LR
  A["用户输入"] --> B["发送消息"]
  B --> C["流式回复"]
  C --> D["渲染组件"]`
</script>

<template>
  <MermaidBlock id="docs-basic-flow" :code="code" />
</template>

API

属性	类型	默认值	说明
code	string	必填	Mermaid 源码
id	string	undefined	渲染节点 ID 后缀

注意事项

Mermaid 在客户端动态加载，SSR 阶段不会执行图表渲染。