这篇博客由来：
由于工作涉及图表绘制，接触到Typora的绘图功能，这个工具真的很好用，也很强大，如下主要针对工具的绘图功能讲解，其它用途暂不赘述。工作日上班，一般只在周末休息期间更新，更新中...
一、简介
1、Typora简介
Typora 是一款跨平台、无缝实时预览的 Markdown 编辑器，由 Abner Lee 开发，核心定位是「文档与格式一体化」，让你在编辑 Markdown 时无需切换「源码 / 预览」模式，直接看到渲染效果，适合技术笔记、业务文档、学术写作、博客撰写等场景，兼顾轻量高效与功能全面。以下从核心特性、版本与兼容性、使用场景、优缺点、最佳实践等方面详细介绍。
2、Typora优缺点
| 优点 | 缺点 |
|---|---|
| 无缝实时预览，专注内容创作 | 1.0 + 付费，无免费版（旧版可离线使用但无更新） |
| 文档与图表一体化，跨平台兼容 | 非专业绘图工具，Mermaid 样式定制有限，超大画布管理较弱 |
| 纯文本存储，Git 版本控制友好 | 本地编辑器，无多人实时协作（需共享文件） |
| 轻量高效，启动快，资源占用低 | 复杂 HTML/CSS 定制需手动改主题文件，门槛较高 |
| 支持数学公式 / Mermaid / 代码高亮等专业功能 | 导出格式受限，无法导出 Visio 等绘图格式 |
3、mermaid扩展
Mermaid 是一款基于文本语法的开源图表绘制工具，核心特点是「用纯文本代码生成可视化图表」，无需拖拽节点、调整样式，只需按固定语法编写文本，就能自动渲染出流程图、UML 图、甘特图等各类图表，广泛适配 Typora、GitHub、VS Code、GoLand 等工具 / 平台，是技术文档、项目管理中「文本化、可版本控制、跨平台兼容」的图表解决方案。
简单来说：Mermaid 让你用写代码的方式画图表，告别传统绘图软件的拖拽操作，兼顾效率与可维护性。
4、mermaid优缺点
按核心维度分类梳理，清晰区分核心优势、先天短板，同时标注影响场景 / 使用建议，方便快速参考：
| 类别 | 特点 | 具体说明 | 影响场景 / 使用建议 |
|---|---|---|---|
| 核心优点 | 纯文本编写，可版本控制 | 图表以文本代码存储，非二进制文件，可提交 Git/SVN，能追溯修改记录，无版本混乱问题 | 技术文档、团队协作场景核心优势，完美适配研发流程 |
| 语法极简，上手 / 修改高效 | 通用逻辑为「声明类型 + 定义元素 + 描述关系」，新手 10 分钟掌握基础；修改仅需编辑文本，无需拖拽节点 | 轻量绘图、临时梳理逻辑，效率远高于拖拽式工具 | |
| 跨平台无缝兼容，开箱即用 | 代码可直接在 Typora/GitHub/ 飞书 / VS Code 等主流平台渲染；无独立客户端，内置引擎即可用 | 多平台分享图表（如文档 + 代码仓库），无需格式转换 | |
| 图表类型全覆盖，一站式满足 | 支持流程图 / 序列图 / 甘特图 / ER 图 / 饼图等，覆盖技术、项目、数据、设计全场景需求 | 日常绘图无需切换多个工具，适配技术文档 / PRD / 项目计划 | |
| 与文档深度融合，一体化创作 | 可内嵌在 Markdown / 代码注释 / ReadMe 中，与文字、代码、表格无缝结合，无需跨工具切换 | 技术文档、产品 PRD 核心需求，告别「图表与文字分离」 | |
| 开源免费，无商业限制 | MIT 协议开源，个人 / 企业使用无付费门槛，无功能解锁限制 | 中小团队、个人开发者，零成本使用 | |
| 实时渲染，调试便捷 | 支持的工具中编写代码即时渲染，修改同步刷新，无需手动导出预览 | 快速调试图表逻辑，大幅提升绘图效率 | |
| 核心缺点 | 样式定制能力弱，颜值上限低 | 仅支持内置主题 + 少量配置，无法自定义节点 / 连线样式、精准调整位置，无企业 VI 适配能力 | 对外交付（白皮书 / 客户演示）、高颜值定制图表不适用，需搭配专业绘图工具 |
| 超大图表画布管理差 | 步骤 / 嵌套过多时自动排版，无法缩放、平移、折叠子流程，易排版混乱 / 节点重叠 | 超 50 步的企业级复杂流程、多层嵌套架构图不适用 | |
| 仅支持静态，无交互能力 | 仅生成静态图表，无点击、钻取、数据联动等交互效果，无法动态演示 | 大屏可视化、动态流程演示、交互式图表场景完全不满足 | |
| 复杂图表代码可读性下降 | 多层循环 / 多分支的复杂逻辑，代码冗长，即使加注释，可读性也不如可视化拖拽图表 | 新人接手复杂图表时，需逐行梳理代码，建议拆分多个子图表 | |
| 版本兼容问题，新语法受限 | 分 8.x（经典）/10.x+（新版），不同平台内置版本不同，新版语法（如 stateDiagram-v2）在旧平台无法渲染 | 跨平台使用优先用 8.x 经典语法，避免「本地能画，平台不显示」 | |
| 中文适配需手动配置 | 默认中文支持一般，部分平台易乱码 / 字体错位，需手动加指令指定中文字体 | 所有中文场景，代码开头添加字体初始化指令即可解决 | |
| 导出格式有限，无法二次编辑 | 仅导出 PNG/SVG/PDF 等静态格式，无法导出 Visio/Draw.io 等绘图文件 | 需在专业绘图软件二次编辑的场景，只能重新绘制 | |
| 协作体验一般，易代码冲突 | 在线协作时为「代码级编辑」，多人同时修改易冲突，无拖拽工具的「节点级协作」友好 | 非技术团队、多人实时高频协作场景，适配性差 |
5、Typora类似工具介绍
根据需求选择：
| 工具类型 | 工具名称 | 核心特点 | Mermaid 支持度 | 适配场景 |
|---|---|---|---|---|
| 轻量 Markdown 编辑器（替代 Typora） | Obsidian | 本地知识库工具，纯离线、双向链接、图谱化管理文档，自定义插件丰富 | 原生支持，可通过插件增强样式 / 导出 | 个人笔记、知识库管理，需长期维护的 Mermaid 图表 |
| VS Code（+ 插件） | 开源代码编辑器，跨平台，通过「Mermaid Preview」「Markdown All in One」插件扩展 | 插件支持实时渲染、语法补全、导出图片，支持新版 Mermaid 语法 | 开发人员写代码 + 文档，图表与代码同编辑器管理 | |
| Cmd Markdown | 在线 / 客户端双端，极简界面，支持离线编辑，导出格式丰富 | 原生实时渲染，支持核心图表类型（流程图 / 序列图 / 甘特图） | 轻量写作、快速绘图，无需复杂配置 | |
| 在线协作文档（团队场景） | 飞书文档 | 企业级在线协作，多人实时编辑，文档 / 表格 / 思维导图一体化 | 原生实时渲染，支持全类型 Mermaid 图表，跨端同步 | 团队协作梳理流程、PRD 编写、项目计划（甘特图） |
| 语雀 | 阿里旗下知识库工具，支持「文档 + 画板 + 表格」，私有化部署 | 原生渲染，支持核心图表类型，可嵌入画板混合编辑 | 技术团队知识库、系统设计文档、跨团队协作 | |
| Notion（+ 插件） | 全能笔记 / 协作工具，模块化管理内容，支持第三方插件 | 需安装 Mermaid 插件（如 Mermaid Chart），渲染流畅，支持新版语法 | 个人 / 小团队轻量协作，内容 + 图表一体化管理 | |
| Confluence | 企业级知识库，适配研发 / 项目管理流程，可集成插件 | 安装「Mermaid for Confluence」插件后支持渲染，兼容核心语法 | 大型企业知识库、标准化流程文档 | |
| 专业绘图工具（Mermaid 增强） | Mermaid Live Editor | Mermaid 官方在线编辑器，实时预览，支持新版语法，可导出 PNG/SVG/PDF | 100% 支持所有 Mermaid 语法（含新版 timeline/quadrantChart） | 调试复杂 Mermaid 代码、导出高清图表 |
| ProcessOn | 在线拖拽绘图工具，支持导入 / 导出 Mermaid 代码 | 支持 Mermaid 代码转拖拽图表，也可拖拽后导出 Mermaid 代码 | 非技术团队协作，兼顾拖拽直观性与 Mermaid 兼容性 | |
| Draw.io（Diagrams.net） | 开源专业绘图工具，跨平台，支持多种格式 | 可导入 Mermaid 代码生成图表，也可导出 Mermaid 代码 | 复杂架构图、定制化样式图表，兼顾 Mermaid 文本化需求 | |
| 开发工具 / 代码仓库（研发场景） | GitHub/GitLab/Gitee | 代码仓库平台，Markdown 渲染核心功能 | 原生支持 Mermaid 核心语法（8.x），README/Issue 中可直接渲染 | 代码仓库文档、开源项目说明，图表与代码仓库一体化 |
| GoLand/IntelliJ IDEA | JetBrains 系列 IDE，2022.3+ 原生支持 | 实时渲染 Markdown 中的 Mermaid 代码，支持语法高亮 / 补全 | 研发人员写代码注释、项目文档，无需切换编辑器 | |
| JetBrains Fleet | 新一代轻量 IDE，云协作，模块化扩展 | 安装 Mermaid 插件后支持实时渲染，适配研发流程 | 云原生研发团队，在线协作编写代码 + 图表 |
核心选择建议（按场景匹配）：
- 替代 Typora（本地 Markdown 编辑） ：优先选 Obsidian （知识库管理）、VS Code + 插件（开发人员适配）；
- 团队在线协作 ：企业级选 飞书文档 / Confluence ，小团队 / 个人选 语雀 / Notion；
- 调试 / 导出 Mermaid 图表 ：用官方的 Mermaid Live Editor（最全语法支持）；
- 兼顾拖拽 + Mermaid ：选 ProcessOn/Draw.io（非技术团队友好，支持双向转换）；
- 研发场景（代码 + 文档） ：直接用 GitHub/GitLab/GoLand，无需额外工具。
总结：
所有工具的核心共性是兼容 Mermaid 核心语法（流程图 / 序列图 / 甘特图），差异主要在「协作能力、样式定制、场景适配」：
- 追求「轻量、本地、文档一体化」→ 选 Obsidian/VS Code，接近 Typora 体验；
- 追求「团队协作、在线编辑」→ 选飞书文档 / 语雀；
- 追求「专业绘图 + Mermaid 兼容」→ 选 ProcessOn/Draw.io；
- 研发场景「代码 + 文档」→ 选 GitHub/GoLand。
二、图表绘制
此工具可以制作很多种图，本博客只介绍一部分的图标绘制方法
1、图表概览
流程图、时序 / 序列图、
1.高频核心图表（技术 / 文档必备，90% 场景适用）
| 图表类型 | 核心关键字 | 核心用途 | Typora 极简示例 |
|---|---|---|---|
| 流程图 | flowchart（TD/LR） | 业务步骤、执行流程、判断分支 | mermaid<br>flowchart TD<br>A(开始) --> B[执行操作]<br>B --> C{成功?}<br>C--是-->D(结束)<br> |
| 时序 / 序列图 | sequenceDiagram | 多系统 / 角色的时序交互 | mermaid<br>sequenceDiagram<br>客户端->>服务端: 请求数据<br>服务端-->>客户端: 返回结果<br> |
| 状态图 | stateDiagram | 任务 / 对象的生命周期流转 | mermaid<br>stateDiagram<br>[*]-->待启动<br>待启动-->运行: 点击启动<br>运行-->停止: 点击关闭<br> |
| 甘特图 | gantt | 项目排期、任务进度、时间规划 | mermaid<br>gantt<br>title 开发计划<br>需求分析: 2026-02-06, 3d<br>开发: after 需求分析, 5d<br> |
2.专业技术图表（系统 / 设计 / 数据库专用）
| 图表类型 | 核心关键字 | 核心用途 | 适用场景 |
|---|---|---|---|
| 类图 | classDiagram | 面向对象的类结构、继承 / 关联 | 系统架构设计、代码类关系梳理 |
| 实体关系图（ER） | erDiagram | 数据库表结构、字段 / 关联关系 | 数据库设计、数据建模 |
| 需求图 | requirementDiagram | 需求拆解、用例 / 验收标准 | 产品 PRD、需求分析文档 |
3.数据 / 场景可视化图表（轻量统计 / 用户分析）
| 图表类型 | 核心关键字 | 核心用途 | 适用场景 |
|---|---|---|---|
| 饼图 | pie | 数据占比、成分分布 | 简单的资源 / 数据统计 |
| 用户旅程图 | journey | 用户操作路径、产品体验节点 | 产品用户体验分析 |
| 象限图 | quadrantChart | 二维维度分类（优先级 / 风险） | 任务优先级、风险评估 |
4.小众拓展图表（轻量需求，按需使用）
| 图表类型 | 核心关键字 | 核心用途 | 适用场景 |
|---|---|---|---|
| 思维导图 | mindmap | 知识点拆解、逻辑梳理 | 笔记整理、方案脑暴 |
| 时间线图 | timeline | 事件发展、版本迭代时间线 | 项目迭代、产品更新记录 |
5.兼容的传统轻量图表（非 Mermaid，仅 Typora 支持）
这类是 Typora 额外集成的flowchart.js/js-sequence 扩展，仅本地渲染有效 ，复制到 GitHub / 飞书等平台会失效，建议优先用上述 Mermaid 语法，仅临时轻量绘图使用：
- 传统流程图：关键字
flow，语法st=>start: 开始 - 简易序列图：关键字
sequence，语法客户端->服务端: 请求
2、使用说明(Typora)
注意：只针对Typora和支持mermaid的markdown渲染工具
- 启用方式（一般默认开启） ：无需额外操作，确保 Typora 「偏好设置→Markdown→勾选 图表」，直接在编辑区输入 ```mermaid 回车，编写代码即可实时渲染；
- 语法适配 ：所有示例均为 Typora 兼容的低版本 Mermaid 语法 ，避免
stateDiagram-v2等新版关键字，无渲染报错； - 中文适配（出现问题在配置） ：在代码开头加初始化指令，解决中文乱码：
%%{init: {'themeVariables': {'fontFamily': '微软雅黑'}}}%%； - 导出 / 复用（还有很多导出格式）：右键渲染后的图表可「复制为图片」（PNG/SVG），或直接复制代码块到 GoLand / 语雀 / GitHub（核心语法全兼容）。
- **注意：**需要遵守语法规则才可以渲染图形
3、图表绘制
注意：
Typora中支持css样式渲染，图形颜色字体可以调整，需要相关技术，门槛稍高。讲解会复杂很多篇幅会很长，所以暂不赘述，想了解可以先了解前端相关技术后再来尝试。也可观看博主早期博客了解前端相关基础内容：博客地址
图表绘制教程顺序：
- 流程图
- 时序 / 序列图
- 状态图
- 甘特图
- 类图
- 实体关系图（ER）
- 需求图
- 饼图
- 用户旅程图
- 象限图
- 思维导图
- 时间线图
1.流程图
代码中未高亮显示、老版本代码可以高亮显示，注意：此高亮指的是源码，不是下面明文的示例代码
(1)新版本语法
flowchart
语法
如下仅是基础的常用功能语法，如需更全面内容可参考官网教程文档
-
方向标识
标识 含义 示例 TD 从上到下 flowchart TD LR 从左到右 flowchart LR BT 从下到上 flowchart BT RL 从右到左 flowchart RL -
节点规则（核心规则）
节点是流程图的最小单元，语法格式：
节点ID[显示文本]，核心规则 -
节点 ID
- 唯一且无特殊字符（仅字母、数字、下划线，不能以数字开头）；
- 区分大小写（
A和a是两个不同节点）； - 示例：
login123✅、123login❌、login-123❌。
-
节点形状与语法（固定格式，不能混用符号）：
形状 语法格式 规则说明 矩形 ID[文本] 方括号必须成对，文本可含空格 圆角矩形 ID(文本) 圆括号必须成对 菱形(判断) ID{文本} 大括号必须成对 双矩形 ID[[文本]] 双括号必须成对 旗帜形 ID>文本] 左尖括号 + 右方括号 -
特殊字符处理
节点文本含
[]/()/{}等符号时，需用反斜杠转义 -
基础连线（箭头）规则
连线样式 语法 规则说明 普通实线 --> 必须是两个短横线 + 箭头 虚线 -.-> 短横线 + 点 + 箭头 加粗实线 ===> 两个等号 + 箭头 带标签 --标签--> 标签需放在两个短横线之间 双向箭头 <--> 左右箭头成对 -
连线方向
默认跟随布局方向，也可手动指定（如
A -down-> B强制向下），支持up/down/left/right -
多节点连线
可链式编写，也可分行，效果一致
-
子图规则
- 子图用于拆分复杂流程，语法：
subgraph 子图名称 + 内容 + end； subgraph和end必须成对出现，子图名称可含空格；- 子图内可自定义布局方向（覆盖全局方向）；
- 子图内节点 ID 仍需全局唯一（不能与外部节点重名）。
- 子图用于拆分复杂流程，语法：
-
注释规则
- 单行注释：
%% 注释内容（必须以%%开头，可放在行首 / 行尾）； - 多行注释：无原生支持，需每行加
%%。
- 单行注释：
-
样式规则：自定义节点/；连线样式
classDef定义样式类，:::绑定到节点（样式类名区分大小写）；linkStyle定义连线样式，参数为「连线索引（从 0 开始）+ 样式」。
-
特殊规则（避坑重点）
- 空格规则：关键字（如
flowchart/subgraph）后必须加空格，节点 / 连线前后的空格不影响（推荐加空格，提升可读性）； - 换行规则：一条完整的节点 / 连线语句可换行，但需保证语法完整；
- 大小写规则：
flowchart/subgraph/end等关键字不区分大小写 （FlowChart/FLOWCHART均可），但节点 ID、样式类名区分大小写。
- 空格规则：关键字（如
代码示例：
# 流程图相关代码
flowchart TD nodeSpacing: 100
Start((开始))
End((结束))
Start --> Req[接收请求]
Req --> Auth{鉴权通过?}
Auth -->|否| AuthFail[返回 401]
AuthFail --> End
Auth -->|是| CacheCheck{缓存命中?}
CacheCheck -->|是| CacheReturn[返回缓存数据]
CacheReturn --> Log[记录访问日志]
Log --> End
CacheCheck -->|否| DBQuery[查询数据库]
DBQuery --> DBOK{查询成功?}
DBOK -->|否| DBError[返回 500 错误]
DBError --> Log
DBOK -->|是| CacheWrite[写入缓存]
CacheWrite --> Response[返回结果]
Response --> Log
%% 子系统示例
subgraph 缓存系统
CacheCheck
CacheReturn
CacheWrite
end
subgraph 数据库系统
DBQuery
DBOK
DBError
end数据库系统
缓存系统
否
是
是
否
否
是
开始
结束
接收请求
鉴权通过?
返回 401
缓存命中?
返回缓存数据
记录访问日志
查询数据库
查询成功?
返回 500 错误
写入缓存
返回结果
(2)老版本语法
graph新版本功能可以支持更丰富的内容，旧版本就不介绍太多了
graph TD
st[开始] --> op[登录]开始
登录
(3)新旧版本差异
graph 是 Mermaid v10 之前 的通用语法，flowchart 是 v10 及以后推出的专用流程图语法，两者的差异主要体现在「功能支持」和「未来维护」上，而非「基础渲染效果」：
| 维度 | graph（旧版） | flowchart（新版） |
|---|---|---|
| 版本背景 | v10 前的默认流程图语法（通用） | v10 后专为流程图设计（专用） |
| 基础功能 | 支持节点、普通连线、子图（够用） | 完全兼容 graph 的基础功能 |
| 高级功能 | 仅支持少量箭头样式，无布局优化 | 支持自定义连线、多类型箭头、布局微调、样式增强 |
| 官方态度 | 仅维护，不新增功能（兼容为主） | 重点迭代，持续新增流程图专属特性 |
| 兼容性 | 全版本支持（老 Typora 也能用） | v10+ 支持（新版 Typora 已适配） |
- 基础场景：几乎无差异
- 高级场景：flowchart 新增专属功能（graph 不支持）
- 更丰富的连线控制
- 布局与节点优化
- 更灵活的子图与交互
(4)版本兼容性
-
Typora 版本 < 1.0 ：内置 Mermaid < v10，
flowchart仅等价于graph，高级功能无效； -
Typora 版本 ≥ 1.0 ：内置 Mermaid ≥ v10，
flowchart可使用所有高级特性； -
如何查版本：Typora → 帮助 → 关于 Typora（可看到 Typora 版本）。