Typora绘图
这篇博客由来：
由于工作涉及图表绘制，接触到Typora的绘图功能，这个工具真的很好用，也很强大，如下主要针对工具的绘图功能讲解，其它用途暂不赘述。工作日上班，一般只在周末休息期间更新，更新中…
由于图表太多，文章篇幅会很长，下面图表绘制会拆分成单独文件，收集在专栏中，跳转链接会放在文档中。
Typora是个一次性付费工具，可以使用VS code + Mermaid Preview扩展替换，这个工具免费
一、简介
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 |
| 时序 / 序列图 | sequenceDiagram | 多系统 / 角色的时序交互 | mermaid |
| 状态图 | stateDiagram | 任务 / 对象的生命周期流转 | mermaid |
| 甘特图 | gantt | 项目排期、任务进度、时间规划 | mermaid |
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样式渲染，图形颜色字体可以调整，需要相关技术，门槛稍高。讲解会复杂很多篇幅会很长，所以暂不赘述，想了解可以先了解前端相关技术后再来尝试。也可观看博主早期博客了解前端相关基础内容：[博客地址](https://www.cnblogs.com/wylshkjj/p/13205728.html)
图表绘制教程顺序：
- 流程图：
- CSDN链接：Typora绘制-流程图
- 博客园链接：Typora绘制-流程图
- 时序 / 序列图：
- CSDN链接：Typora绘制-时序&序列图
- 博客园链接：Typora绘制-时序&序列图
- 状态图
- CSDN链接：Typora绘制-状态图
- 博客园链接：Typora绘制-状态图
- 甘特图
- CSDN链接：Typora绘制-甘特图
- 博客园链接：Typora绘制-甘特图
- 类图
- 实体关系图（ER）
- 需求图
- 饼图
- 用户旅程图
- 象限图
- 思维导图
- 时间线图
