首页/新闻资讯/正文详情

Mermaid源码排版规则

发布时间:2026/9/27 22:58:51 来源:云帆数科 栏目:资讯中心
Mermaid源码排版规则
适配 flowchart / sequenceDiagram / classDiagram / erDiagram优先流程图最常用1. 行预处理每一行先trimEnd()移除行尾空格跳过空行压缩连续多个空行 → 只保留最多1个空行识别行类型图表声明行flowchart TD/graph LR/sequenceDiagram→直接顶格输出重置缩进块开始subgraph xxx/alt/loop/par→ 当前缩进输出本行缩进1块结束end→缩进-1再输出本行end和块关键字同级注释行%% xxx→ 跟随当前缩进原样保留注释内容连线/语句A--B、style A fill:#ccc、classDef→ 当前缩进输出并且自动给连线两侧补空格A--B→A -- B2. 连线空白规则重点美化匹配正则/(\s*)([A-Za-z0-9_\-])(\s*)(--[-]|-.-|)(\s*)([^;])/箭头运算符--,-.-,,---两侧强制加单个空格❗ 标签内字符串[hello -- world]内部不替换需要跳过引号包裹区域难点3. 缩进规则分图表类型✅ flowchart / graphflowchart TD A -- B subgraph Group B -- C C -- D end D -- Esubgraph本行按当前缩进之后层级1end层级先-1再打印 end节点连线、style、classDef使用当前层级缩进✅ sequenceDiagramsequenceDiagram participant U as User participant S as Server loop 循环 U-S: 请求 S--U: 返回 endparticipant/actor永远顶格不受缩进影响loop/alt/opt/par块开启缩进1end 回退缩进✅ classDiagramclassDiagram class User { String name login() }class X {当前缩进遇到{缩进1}缩进-1输出}4. 注释处理非常影响可读性%%单行注释跟随当前缩进原样保留内容不移动注释位置注释属于当前行不会漂移到别的节点旁边限制不支持多行注释%% ... \n ... %%Mermaid原生也很少用边界 case必须做判断否则会破坏图表引号内文本跳过A[Hello -- World]里面的--不要替换空格实现小技巧Lexer 扫描时维护inQuote标记碰到切换开关引号内部不做箭头正则替换。多行标签A[line1\nline2]内部换行保持原样。单行多连线A--B B--C可选配置项「是否强制拆分成多行」建议默认不拆分避免破坏用户意图。非法语法容错遇到无法识别的行原样输出不报错不要直接中断格式化。特殊字符# , : |在标签内不做任何修改。极简可运行 JS Demo流程图格式化核心可嵌入编辑器按钮点击事件仅演示 flowChart可扩展其他图表functionformatMermaid(source){constlinessource.split(/\r?\n/);letindentLevel0;constindent ;constresult[];letinQuotefalse;functionformatArrow(line){// 简单替换箭头跳过引号内部letout;for(leti0;iline.length;i){constcline[i];if(c)inQuote!inQuote;outc;if(!inQuote){outout.replace(/(--|-.-||---)/g, $1 );}}// 清理多余连续空格outout.replace(/\s/g, ).trim();returnout;}for(constrawLineoflines){constlinerawLine.trim();if(line){result.push();continue;}// 图表声明行if(/^(flowchart|graph|sequenceDiagram|classDiagram|erDiagram)/.test(line)){indentLevel0;result.push(line);continue;}// end 块结束先减缩进if(/^end\b/.test(line)){indentLevelMath.max(0,indentLevel-1);result.push(indent.repeat(indentLevel)line);continue;}// subgraph / loop / alt 块开始if(/^(subgraph|loop|alt|opt|par)\b/.test(line)){constformattedformatArrow(line);result.push(indent.repeat(indentLevel)formatted);indentLevel;continue;}// 注释行if(/^%%/.test(line)){result.push(indent.repeat(indentLevel)line);continue;}// 普通连线、style、classDefconstformattedformatArrow(line);result.push(indent.repeat(indentLevel)formatted);}// 合并空行连续空行只保留1个returnresult.join(\n).replace(/\n\s*\n/g,\n\n);}

相关推荐

KAIST CS431 Rust 并发编程笔记(三)
KAIST CS431 Rust 并发编程笔记(三)

阅读完这两份文档后,你现在可以理解示例中的内容了。这是我们仓库中的一个栈实现示例。在本视频的剩余部分,我们假设你已经阅读了 Aaron 的文档和特性文档。现在,我们将再次阅读并发栈、队列和链表的实现,看看在垃圾回收方面发生了… · 2026/9/27 22:58:51

基于 Triton Inference Server 的 ERNIE 层次文本分类服务化部署指南(PaddleNLP 实战)
基于 Triton Inference Server 的 ERNIE 层次文本分类服务化部署指南(PaddleNLP 实战)

人工智能大模型预训练微调LoRARLHF强化学习分布式训练 【免费下载链接】PaddleNLP Easy-to-use and powerful LLM and SLM library with awesome model zoo. 项目地址: https://gitcode.com/gh_mirrors/pa/PaddleNLP 点击查看 免费下载 本文以 PaddleNLP 层次文本分… · 2026/9/27 22:58:51

零信任架构实战:基于天远人企关联构建自动化对公信贷准入网关
零信任架构实战:基于天远人企关联构建自动化对公信贷准入网关

破解对公信贷准入痛点:从传统人工核查到数据直连穿透 在大型银行核心系统的对公信贷审核微服务(B2B Corporate Credit Audit Microservice)中,精准评估法定代表人、高管或核心股东与其名下关联企业的真实从属关系,是信… · 2026/9/27 22:58:45

VSCODE加ESP-IDF配置指南:ESP32开发环境搭建与调试
VSCODE加ESP-IDF配置指南:ESP32开发环境搭建与调试

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 23:31:02

Linux 上 WFDB 心电信号分析实战:从 wfdb.tar.gz 到 HRV 频域分析
Linux 上 WFDB 心电信号分析实战:从 wfdb.tar.gz 到 HRV 频域分析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 23:31:02

ESP32-S3 免驱 USB 摄像头实战:TinyUSB UVC 协议与 OV2640 图像传输
ESP32-S3 免驱 USB 摄像头实战:TinyUSB UVC 协议与 OV2640 图像传输

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 23:30:56

建设的访问网站需要密码?3步搞定完整流程不慌
建设的访问网站需要密码?3步搞定完整流程不慌

建设的访问网站需要密码?3步搞定完整流程不慌 自己不会代码想做网站,却卡在访问需要密码这一步,其实并非技术难题,而是流程认知偏差。很多新手误以为“密码”是技术壁垒,实则是权限配置缺失。本文拆解【建设的访问网站需要密码】背后的完整流程,从原理… · 2026/9/27 23:30:56

VMware虚拟机安全移除非系统磁盘完整指南
VMware虚拟机安全移除非系统磁盘完整指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 23:30:56

青岛优化网站关键词实战:从模板站突围到精准获客
青岛优化网站关键词实战:从模板站突围到精准获客

青岛优化网站关键词实战:从模板站突围到精准获客 别再说模板网站太丑了,更可怕的是它丑得连搜索引擎都懒得看。很多老板拿着网上几百块的模板站,问建站报价时觉得便宜,上线后发现排名为零,客户根本搜不到你。青岛这边做本地生意的特别多,从海鲜批发到工… · 2026/9/27 23:30:56

MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现
MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现

简介:这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程,从线性调频(LFM)信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑,面向电子信息工程、计算机、数学等专业学生,适用于课程设计、期末大作… · 2026/9/27 0:00:01

汕头网站建设制作厂家避坑指南:5大注意事项救急
汕头网站建设制作厂家避坑指南:5大注意事项救急

汕头网站建设制作厂家避坑指南:5大注意事项救急 改个需求建站公司拖一周,这种憋屈事我见得太多了。 很多汕头老板找本地建站团队,签合同前看着方案挺美,一上线就变脸。 今天不聊虚的,直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01

多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习
多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习

简介:基于PyTorch的多模态虚假新闻检测项目完整代码包,面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者,解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征,以Res… · 2026/9/27 0:00:01

MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现
MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现

简介:这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程,从线性调频(LFM)信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑,面向电子信息工程、计算机、数学等专业学生,适用于课程设计、期末大作… · 2026/9/27 0:00:01

汕头网站建设制作厂家避坑指南:5大注意事项救急
汕头网站建设制作厂家避坑指南:5大注意事项救急

汕头网站建设制作厂家避坑指南:5大注意事项救急 改个需求建站公司拖一周,这种憋屈事我见得太多了。 很多汕头老板找本地建站团队,签合同前看着方案挺美,一上线就变脸。 今天不聊虚的,直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01

多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习
多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习

简介:基于PyTorch的多模态虚假新闻检测项目完整代码包,面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者,解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征,以Res… · 2026/9/27 0:00:01

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码