这篇博客由来 由于工作涉及图表绘制接触到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 编辑器替代 TyporaObsidian本地知识库工具纯离线、双向链接、图谱化管理文档自定义插件丰富原生支持可通过插件增强样式 / 导出个人笔记、知识库管理需长期维护的 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 EditorMermaid 官方在线编辑器实时预览支持新版语法可导出 PNG/SVG/PDF100% 支持所有 Mermaid 语法含新版 timeline/quadrantChart调试复杂 Mermaid 代码、导出高清图表ProcessOn在线拖拽绘图工具支持导入 / 导出 Mermaid 代码支持 Mermaid 代码转拖拽图表也可拖拽后导出 Mermaid 代码非技术团队协作兼顾拖拽直观性与 Mermaid 兼容性Draw.ioDiagrams.net开源专业绘图工具跨平台支持多种格式可导入 Mermaid 代码生成图表也可导出 Mermaid 代码复杂架构图、定制化样式图表兼顾 Mermaid 文本化需求开发工具 / 代码仓库研发场景GitHub/GitLab/Gitee代码仓库平台Markdown 渲染核心功能原生支持 Mermaid 核心语法8.xREADME/Issue 中可直接渲染代码仓库文档、开源项目说明图表与代码仓库一体化GoLand/IntelliJ IDEAJetBrains 系列 IDE2022.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 极简示例流程图flowchartTD/LR业务步骤、执行流程、判断分支mermaidbrflowchart TDbrA(开始) -- B[执行操作]brB -- C{成功?}brC--是--D(结束)br时序 / 序列图sequenceDiagram多系统 / 角色的时序交互mermaidbrsequenceDiagrambr客户端-服务端: 请求数据br服务端--客户端: 返回结果br状态图stateDiagram任务 / 对象的生命周期流转mermaidbrstateDiagrambr[*]--待启动br待启动--运行: 点击启动br运行--停止: 点击关闭br甘特图gantt项目排期、任务进度、时间规划mermaidbrganttbrtitle 开发计划br需求分析: 2026-02-06, 3dbr开发: after 需求分析, 5dbr2.专业技术图表系统 / 设计 / 数据库专用图表类型核心关键字核心用途适用场景类图classDiagram面向对象的类结构、继承 / 关联系统架构设计、代码类关系梳理实体关系图ERerDiagram数据库表结构、字段 / 关联关系数据库设计、数据建模需求图requirementDiagram需求拆解、用例 / 验收标准产品 PRD、需求分析文档3.数据 / 场景可视化图表轻量统计 / 用户分析图表类型核心关键字核心用途适用场景饼图pie数据占比、成分分布简单的资源 / 数据统计用户旅程图journey用户操作路径、产品体验节点产品用户体验分析象限图quadrantChart二维维度分类优先级 / 风险任务优先级、风险评估4.小众拓展图表轻量需求按需使用图表类型核心关键字核心用途适用场景思维导图mindmap知识点拆解、逻辑梳理笔记整理、方案脑暴时间线图timeline事件发展、版本迭代时间线项目迭代、产品更新记录5.兼容的传统轻量图表非 Mermaid仅 Typora 支持这类是 Typora 额外集成的flowchart.js/js-sequence扩展仅本地渲染有效复制到 GitHub / 飞书等平台会失效建议优先用上述 Mermaid 语法仅临时轻量绘图使用传统流程图关键字flow语法ststart: 开始简易序列图关键字sequence语法客户端-服务端: 请求2、使用说明(Typora)注意只针对Typora和支持mermaid的markdown渲染工具启用方式一般默认开启无需额外操作确保 Typora 「偏好设置→Markdown→勾选 图表」直接在编辑区输入 mermaid 回车编写代码即可实时渲染语法适配所有示例均为 Typora 兼容的低版本 Mermaid 语法避免stateDiagram-v2等新版关键字无渲染报错中文适配出现问题在配置在代码开头加初始化指令解决中文乱码%%{init: {themeVariables: {fontFamily: 微软雅黑}}}%%导出 / 复用还有很多导出格式右键渲染后的图表可「复制为图片」PNG/SVG或直接复制代码块到 GoLand / 语雀 / GitHub核心语法全兼容。**注意**需要遵守语法规则才可以渲染图形3、图表绘制注意 Typora中支持css样式渲染图形颜色字体可以调整需要相关技术门槛稍高。讲解会复杂很多篇幅会很长所以暂不赘述想了解可以先了解前端相关技术后再来尝试。也可观看博主早期博客了解前端相关基础内容博客地址图表绘制教程顺序流程图CSDN链接Typora绘制-流程图博客园链接Typora绘制-流程图时序 / 序列图CSDN链接Typora绘制-时序序列图博客园链接Typora绘制-时序序列图状态图CSDN链接Typora绘制-状态图博客园链接Typora绘制-状态图甘特图CSDN链接Typora绘制-甘特图博客园链接Typora绘制-甘特图类图CSDN链接Typora绘制-类图博客园链接Typora绘制-类图实体关系图ERCSDN链接Typora绘制-实体关系图(ER)博客园链接Typora绘制-实体关系图(ER)需求图CSDN链接Typora绘制-实体关系图(ER)博客园链接Typora绘制-实体关系图(ER)饼图象限图CSDN链接Typora绘制-饼图象限图(ER)博客园链接Typora绘制-饼图象限图(ER)用户旅程图CSDN链接Typora绘制-用户旅程图博客园链接Typora绘制-用户旅程图思维导图CSDN链接Typora绘制-思维导图博客园链接Typora绘制-思维导图时间线图CSDN链接Typora绘制-时间线图博客园链接Typora绘制-时间线图
