Mermaid

说明

面向“AI 生成图示 / 文档可视化 / 流程与架构讲解”的图表组件。与 CodeHighlighter 展示 mermaid 源码互补，本组件把 Code 里的 Mermaid 文本真正渲染成矢量图：内部经框架 wwwroot/js/web.js 暴露的 known.mermaid.render 完成——Code 交给 mermaid 解析并注入容器为一段 svg 矢量标记。库惰性加载：组件优先复用宿主已注入的全局 window.mermaid，缺失时按 Source 动态 import() 一次并缓存（Source 留空取内置 jsDelivr ESM；mermaid 官方 ESM 会把每种图表拆成动态分块，只下载主文件并不能离线，内网要用 wwwroot/js/libs/mermaid/README.md 里的 esbuild 姿势自托管一份，或宿主预先注入 window.mermaid）；加载失败会落入错误态而非抛异常，预渲染阶段自动跳过。参数：Code 为 Mermaid 源码（业务数据、不本地化）；Theme 取 default / neutral / dark / forest，留空则跟随框架明暗（暗→dark、亮→default），且框架切换主题时组件会重绘成对应配色；SecurityLevel 默认 strict（净化标签，防注入），需标签内 HTML 时改 loose；UseMaxWidth（默认 true）让流程图等按容器宽度自适应；Height 给容器设定最小高度。回调 OnRendered（回传当前源码）与 OnError（回传错误信息）。渲染前显示加载态（LoadingText，默认“渲染中...”）、失败显示错误态（ErrorText，默认“图表渲染失败”，并把 mermaid 报错细节渲染进 pre 代码块）、空源码显示空态（EmptyText，默认“暂无图表”）——三条状态文案为组件内置中文、走词条，而 Id / 图表代码 / 主题标识 / 源地址视为业务或内部数据不本地化。作为 AI 家族里少数需要 JS 互操作的组件，它把模型输出的结构化意图变成可读的图。Visible / Class / Style / UserAttributes 沿用 BaseComponent。

常见能力：

• 把 Mermaid 文本渲染成 SVG：流程图 / 时序图 / 类图 / 甘特图 / 状态图 等
• mermaid 库惰性加载并缓存：优先宿主 window.mermaid，否则按 Source 动态 import（默认 jsDelivr ESM，可自托管离线）
• Theme 默认跟随框架明暗、切主题自动重绘；可显式 default / neutral / dark / forest
• Code 或 Theme 变化自动重绘；预渲染阶段安全跳过、不抛异常
• SecurityLevel 默认 strict（净化防注入），UseMaxWidth 让图形按容器自适应，Height 设定最小高度
• 内置加载 / 失败（含 mermaid 报错细节）/ 空态，状态文案走词条；OnRendered / OnError 回调
• AI 家族中少数需 JS 互操作的组件：承载模型生成的结构化图，与 CodeHighlighter 展示源码互补

用法

<Mermaid Code="@diagram" Height="300px" OnError="@OnError" />

@code {
    string diagram = "graph TD; A[开始]-->B{校验}; B-->|是|C[通过]; B-->|否|D[驳回];";
    void OnError(string err) => UI.Warn("图表渲染失败", err);
}

API 参数

所有组件均继承 BaseComponent，除上表参数外还支持 Class、Style、Disabled、Visible。