外部 .mmd 文件引用渲染测试:Markdown 里嵌入 Mermaid 图

本文用于验证博客系统新功能:Markdown 用图片语法引用 .mmd 文件,浏览器端动态加载 mermaid 渲染为 SVG。

外部文件引用

下面的图来自同目录的 渲染流程.mmd 文件,写法是 ![渲染流程](./渲染流程.mmd)

渲染流程

内联 mermaid 代码块

同一个渲染函数同时支持直接写在文章里的 mermaid 代码块:

sequenceDiagram
    participant M as Markdown
    participant B as 构建脚本
    participant V as ArticleModal
    M->>B: ![图](./xxx.mmd)
    B->>B: 复制资源 + 重写路径
    V->>V: 发现 .mmd 引用
    V->>V: 动态 import mermaid
    V->>M: 渲染 SVG 替换占位

故意写错的图表

下面的图表语法错误,应显示错误提示而不影响其他内容:

flowchart TD
    A[缺少连线对象 ->