把输入框变成 AI 的“超级入口”（ProseMirror 全流程实战）
2026/6/5 10:32:13
文章目录
- 概述
- 什么是 Mermaid
- 核心子图类型
- 子图类型支持现状
- Flowchart 语法
- 基础语法
- 基本概念
- 布局方向
- 节点定义
- 连接边类型
- 综合示例
- 高级语法
- 子图与嵌套
- 样式与交互
- 节点文本格式化
- 时序图与类图核心语法
- 时序图（Sequence Diagram）
- 类图（Class Diagram）
- 其他子图类型核心语法
- 饼图（Pie Chart）
- 甘特图（Gantt Chart）
- 思维导图（Mindmap）
- 状态图（State Diagram）
概述
什么是 Mermaid
Mermaid 是一款基于文本的开源图表绘制工具，核心优势在于“文本驱动可视化”——通过简洁的语法定义节点、关系与布局，自动生成标准化图表，无需手动拖拽排版。其图表可直接嵌入 Markdown 文档，兼具可维护性与跨平台兼容性，广泛应用于技术文档、代码注释、演示文稿等场景，大幅降低图表绘制与迭代成本。
在现代开发者工作流中，Mermaid 已成为 Markdown 生态中事实上的主流标准之一。尤其在技术文档、README、内部 Wiki 等场景下，它几乎是默认的文本绘图方案，其简洁性与可版本控制特性深受工程团队青睐。
官方文档：核心语法参考官网 Mermaid 官方文档，其中流程图详细语法可查阅 Flowchart 专项文档。
核心子图类型
- 流程图（Flowchart）：用于描述流程逻辑、业务步骤、系统架构流转；
- 时序图（Sequence Diagram）：用于展示对象间的交互时序与消息传递；
- 类图（Class Diagram）