3 条主线 8 段代码Mermaid.js 电信网络可视化实战与避坑指南【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid凌晨两点扩容方案刚过评审Wiki 里的拓扑图却还停在上一版——几十张手绘图集体过期。用 Mermaid.js 把网络架构、信令时序、排障流程写成文本代码30 分钟跑通设计、协作、运维 3 条主线读完本文你能独立维护一套跟着变更走的电信网络文档。为什么是它4 个传统绘图工具绕不开的痛点✅ 文本可版本化图表不再是冻结的截图。你在传统绘图工具里导出的图是二进制文件新图覆盖旧图之后没人说得清改了什么。Mermaid 的图源是纯文本可以 diff、可以 review、可以回滚图和代码进同一个仓库变更历史一目了然。一处改动全链更新。在绘图工具里加一个网元你要拖框、对齐、重画连线再导出在 Mermaid 里加一行PCF -- SMF保存即生效。改图成本从分钟级降到秒级这直接决定了你会不会愿意顺手改图。协作有共同语言。你不再需要把文件打回给设计同事。工程师直接改文本评审人看 diff讨论聚焦在拓扑变更本身而不是这个框能不能挪一挪。同一份源码随处渲染。同一段文本可以在网页、Wiki、CI 报告里渲染成 SVG主题用统一配置控制全文档几十张图的视觉风格自动一致。能力全景一张表看懂 8 种图表的电信用法先给你一张速查表再按生命周期分 3 条主线展开。每行是图表类型 × 适用场景 × 一句话说明遇到具体图表先查这里。图表类型典型电信场景一句话说明flowchart 流程图网络拓扑、排障 SOPsubgraph 圈定网元分组菱形节点表达判断分支sequenceDiagram 时序图跨网元信令、呼叫建立每个网元一条生命线消息按时间先后排列stateDiagram-v2 状态图设备/协议状态机用状态 —事件→ 状态表达流转可挂注释gantt 甘特图升级排期、维护窗口任务条 日期轴可用 excludes 自动避开周末pie 饼图故障类型分布各故障类别占比一张图说清资源投向erDiagram ER 图网元资源归属、配置建模实体关系线表达谁管谁、谁依赖谁classDiagram 类图协议模块与接口设计描述协议栈模块关系与时序图配合看实现mindmap 思维导图故障原因归类辐射式列原因分支适合复盘会现场发散主线一设计期把网络拓扑与状态机写成文本设计期你最先被催交的就是评审图核心网逻辑架构、网元边界、连接关系一张都不能少。用子图表达 5G 核心网逻辑架构下面这张图解决把核心网评审图从 PPT 搬进仓库的任务外层 subgraph 划接入网/核心网边界内层按功能分组虚线表达服务发现这类弱连接。最值得注意的写法是 subgraph 两层嵌套图的分组和网络边界同构后续新增网元只需把节点丢进对应子图图的结构不会散。语法细节可对照 docs/syntax/flowchart.md。用状态图描述基站切换过程做故障复盘或协议分析时你需要向别人解释设备在什么状态下、被什么事件触发、流转到哪里。手绘状态机最大的麻烦是箭头一改、整页重画。关键点note能把运维备注直接挂在状态旁边一张图同时当状态机说明文档用复盘时不用另起一页 PPT。语法参考 docs/syntax/stateDiagram.md。主线二协议期把跨网元信令写成时序与并行分支进入协议期评审对象从结构变成过程注册、会话建立、呼叫每一步谁发消息给谁、顺序是什么。VoLTE 呼叫建立时序图这个例子解决把 VoLTE 呼叫流程讲清楚的任务参与者用as给网元起业务名autonumber让评审时可以直接说第 7 步。值得注意实线-是请求、虚线--是应答两种线型让一问一答在图上一目了然。时序图进阶语法见 docs/syntax/sequenceDiagram.md。用 par 分支表达并行的策略与计费决策计费场景里策略点会同时向在线计费系统和策略决策点发起请求——用顺序画法会把并行画成串行误导阅读。par ... and ... end把并发分支画在同一时间带内评审时不会再被问这两步到底是先后还是同时。主线三运维期把排障 SOP 与维护排期写成文本运维期图表的读者是值班工程师图要能被照着执行而不是只用来欣赏。标准化排障流程图从告警到关单把排障 SOP 写成流程图后新值班员工照着菱形节点一步步走路径不会分叉到图外。最关键的两处写法判断节点全部用菱形{}否分支回到告警类型形成闭环——流程图里不允许有走不完的尾。维护窗口甘特图与故障分布饼图月度维护窗口排期和故障占比是周会最常问的两张图。甘特图里excludes weekends一行就把维护窗口自动避开周末crit标出回退预案排期评审不用口头解释。甘特图语法与excludedDays进阶用法见 docs/syntax/gantt.md饼图见 docs/syntax/pie.md。工程化落地改一行文本图跟着变 图表能进仓库只是第一步让它自动出现在文档和网页里才是收益兑现。推荐的工作流图源放在docs/diagrams/*.mmd或直接内嵌在 markdown 里文档站引入 mermaid 并开启 startOnLoad页面里所有pre.mermaid块加载即渲染CI 里批量渲染成 SVG 提交评审时能看到图级别的变更。下面是最小可运行的 HTML改pre里的文本刷新页面图就变全程不碰任何绘图工具。!DOCTYPE html html langzh-CN head meta charsetUTF-8 / title5G 核心网架构文档/title script src/static/js/mermaid.min.js/script /head body h15G 核心网逻辑架构/h1 pre classmermaid flowchart TB gNB[5G 基站] -- AMF[接入和移动性管理] AMF -- SMF[会话管理] -- UPF[用户面功能] -- DN[外部数据网络] /pre script mermaid.initialize({ startOnLoad: true, securityLevel: strict }); /script /body /html如果文档站是 npm 工程npm i mermaid后也可以只调用mermaid.render()手动渲染单个字符串适合把图当接口输出。避坑5 个高频问题与排查思路 ⚠️1. 中文写进标签节点 ID 保持英文。5G基站[x]这类写法容易触发解析错误正确姿势是gNB[5G 基站]subgraph 标题含空格或特殊字符时同样加引号如subgraph AN[接入网 Access]。2. subgraph 嵌套别超过三层。嵌套太深再叠加多处direction声明布局很容易崩。图真的复杂就拆成两张用文档串联而不是一张图硬扛。3. securityLevel 想清楚再配。loose会启用 HTML 标签和点击回调适合本地工具对外发布的文档站建议用strict并且不要直接渲染不可信来源的文本。4. 渲染失败先查 parse再查样式。用mermaid.parse(text)先做校验报错会指向具体行高频原因是 subgraph 少了end、标签里的引号或括号不配对。常见问题排查见 docs/config/faq.md。5. Gantt 的日期格式要对齐 dateFormat。dateFormat YYYY-MM-DD必须对应 【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 3 条主线 8 段代码：Mermaid.js 电信网络可视化实战与避坑指南
3 条主线 8 段代码Mermaid.js 电信网络可视化实战与避坑指南【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid凌晨两点扩容方案刚过评审Wiki 里的拓扑图却还停在上一版——几十张手绘图集体过期。用 Mermaid.js 把网络架构、信令时序、排障流程写成文本代码30 分钟跑通设计、协作、运维 3 条主线读完本文你能独立维护一套跟着变更走的电信网络文档。为什么是它4 个传统绘图工具绕不开的痛点✅ 文本可版本化图表不再是冻结的截图。你在传统绘图工具里导出的图是二进制文件新图覆盖旧图之后没人说得清改了什么。Mermaid 的图源是纯文本可以 diff、可以 review、可以回滚图和代码进同一个仓库变更历史一目了然。一处改动全链更新。在绘图工具里加一个网元你要拖框、对齐、重画连线再导出在 Mermaid 里加一行PCF -- SMF保存即生效。改图成本从分钟级降到秒级这直接决定了你会不会愿意顺手改图。协作有共同语言。你不再需要把文件打回给设计同事。工程师直接改文本评审人看 diff讨论聚焦在拓扑变更本身而不是这个框能不能挪一挪。同一份源码随处渲染。同一段文本可以在网页、Wiki、CI 报告里渲染成 SVG主题用统一配置控制全文档几十张图的视觉风格自动一致。能力全景一张表看懂 8 种图表的电信用法先给你一张速查表再按生命周期分 3 条主线展开。每行是图表类型 × 适用场景 × 一句话说明遇到具体图表先查这里。图表类型典型电信场景一句话说明flowchart 流程图网络拓扑、排障 SOPsubgraph 圈定网元分组菱形节点表达判断分支sequenceDiagram 时序图跨网元信令、呼叫建立每个网元一条生命线消息按时间先后排列stateDiagram-v2 状态图设备/协议状态机用状态 —事件→ 状态表达流转可挂注释gantt 甘特图升级排期、维护窗口任务条 日期轴可用 excludes 自动避开周末pie 饼图故障类型分布各故障类别占比一张图说清资源投向erDiagram ER 图网元资源归属、配置建模实体关系线表达谁管谁、谁依赖谁classDiagram 类图协议模块与接口设计描述协议栈模块关系与时序图配合看实现mindmap 思维导图故障原因归类辐射式列原因分支适合复盘会现场发散主线一设计期把网络拓扑与状态机写成文本设计期你最先被催交的就是评审图核心网逻辑架构、网元边界、连接关系一张都不能少。用子图表达 5G 核心网逻辑架构下面这张图解决把核心网评审图从 PPT 搬进仓库的任务外层 subgraph 划接入网/核心网边界内层按功能分组虚线表达服务发现这类弱连接。最值得注意的写法是 subgraph 两层嵌套图的分组和网络边界同构后续新增网元只需把节点丢进对应子图图的结构不会散。语法细节可对照 docs/syntax/flowchart.md。用状态图描述基站切换过程做故障复盘或协议分析时你需要向别人解释设备在什么状态下、被什么事件触发、流转到哪里。手绘状态机最大的麻烦是箭头一改、整页重画。关键点note能把运维备注直接挂在状态旁边一张图同时当状态机说明文档用复盘时不用另起一页 PPT。语法参考 docs/syntax/stateDiagram.md。主线二协议期把跨网元信令写成时序与并行分支进入协议期评审对象从结构变成过程注册、会话建立、呼叫每一步谁发消息给谁、顺序是什么。VoLTE 呼叫建立时序图这个例子解决把 VoLTE 呼叫流程讲清楚的任务参与者用as给网元起业务名autonumber让评审时可以直接说第 7 步。值得注意实线-是请求、虚线--是应答两种线型让一问一答在图上一目了然。时序图进阶语法见 docs/syntax/sequenceDiagram.md。用 par 分支表达并行的策略与计费决策计费场景里策略点会同时向在线计费系统和策略决策点发起请求——用顺序画法会把并行画成串行误导阅读。par ... and ... end把并发分支画在同一时间带内评审时不会再被问这两步到底是先后还是同时。主线三运维期把排障 SOP 与维护排期写成文本运维期图表的读者是值班工程师图要能被照着执行而不是只用来欣赏。标准化排障流程图从告警到关单把排障 SOP 写成流程图后新值班员工照着菱形节点一步步走路径不会分叉到图外。最关键的两处写法判断节点全部用菱形{}否分支回到告警类型形成闭环——流程图里不允许有走不完的尾。维护窗口甘特图与故障分布饼图月度维护窗口排期和故障占比是周会最常问的两张图。甘特图里excludes weekends一行就把维护窗口自动避开周末crit标出回退预案排期评审不用口头解释。甘特图语法与excludedDays进阶用法见 docs/syntax/gantt.md饼图见 docs/syntax/pie.md。工程化落地改一行文本图跟着变 图表能进仓库只是第一步让它自动出现在文档和网页里才是收益兑现。推荐的工作流图源放在docs/diagrams/*.mmd或直接内嵌在 markdown 里文档站引入 mermaid 并开启 startOnLoad页面里所有pre.mermaid块加载即渲染CI 里批量渲染成 SVG 提交评审时能看到图级别的变更。下面是最小可运行的 HTML改pre里的文本刷新页面图就变全程不碰任何绘图工具。!DOCTYPE html html langzh-CN head meta charsetUTF-8 / title5G 核心网架构文档/title script src/static/js/mermaid.min.js/script /head body h15G 核心网逻辑架构/h1 pre classmermaid flowchart TB gNB[5G 基站] -- AMF[接入和移动性管理] AMF -- SMF[会话管理] -- UPF[用户面功能] -- DN[外部数据网络] /pre script mermaid.initialize({ startOnLoad: true, securityLevel: strict }); /script /body /html如果文档站是 npm 工程npm i mermaid后也可以只调用mermaid.render()手动渲染单个字符串适合把图当接口输出。避坑5 个高频问题与排查思路 ⚠️1. 中文写进标签节点 ID 保持英文。5G基站[x]这类写法容易触发解析错误正确姿势是gNB[5G 基站]subgraph 标题含空格或特殊字符时同样加引号如subgraph AN[接入网 Access]。2. subgraph 嵌套别超过三层。嵌套太深再叠加多处direction声明布局很容易崩。图真的复杂就拆成两张用文档串联而不是一张图硬扛。3. securityLevel 想清楚再配。loose会启用 HTML 标签和点击回调适合本地工具对外发布的文档站建议用strict并且不要直接渲染不可信来源的文本。4. 渲染失败先查 parse再查样式。用mermaid.parse(text)先做校验报错会指向具体行高频原因是 subgraph 少了end、标签里的引号或括号不配对。常见问题排查见 docs/config/faq.md。5. Gantt 的日期格式要对齐 dateFormat。dateFormat YYYY-MM-DD必须对应 【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考