时序图 状态图 与时间线

流程图只是入口，技术文档里常见的时序 状态 时间线 与 Git 图同样会走这套 wrapper 与运行时

时序图

sequenceDiagram
  participant Author as 作者
  participant Markdown
  participant Plugin as 插件
  participant Runtime as 运行时
  participant Mermaid

  Author->>Markdown: 编写 Mermaid fence
  Markdown->>Plugin: 解析 fenced block
  Plugin->>Runtime: 输出 wrapper markup
  Runtime->>Mermaid: 初始化并渲染
  Mermaid-->>Runtime: 返回 SVG
  Runtime-->>Author: 展示可交互图表

Loading diagram…

状态图

stateDiagram-v2
  [*] --> Idle
  Idle --> Rendering: 发现 wrapper
  Rendering --> Ready: svg 挂载完成
  Rendering --> Error: 解析失败
  Ready --> Rendering: 触发 rerender
  Error --> Rendering: 更新源码

Loading diagram…

时间线

timeline
  title 示例集成时间线
  1 : 注册 markdown-it 插件
  2 : 导入运行时样式
  3 : 初始化 VitePress 运行时
  4 : 调整 --mermaid-it-min-height
  5 : 扩充多页面示例

Loading diagram…

Git Graph

gitGraph
  commit id: "setup"
  branch feature/docs
  checkout feature/docs
  commit id: "add zh pages"
  commit id: "add sizing priority"
  checkout main
  merge feature/docs
  commit id: "ship demo"

Loading diagram…

Mind map

mindmap
  root((文档站重写))
    指南
      快速开始
      渲染引擎
      手绘与字体
    示例
      流程图
      渲染模式
      高级图形
    参考
      插件选项
      Fence 选项
      运行时 API

Loading diagram…