适配 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);}
