企业官网建设流程全解析

如何用 Mermaid 绘制 Ishikawa 鱼骨图梳理问题原因

【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid

当你要把某个具体问题的原因结构化地整理出来——比如一次生产缺陷由哪些环节的哪些因素导致、一次服务器故障可以从哪几条主线排查——Mermaid 的 Ishikawa 图（鱼骨图）可以帮你用文本描述问题与多层原因，再自动渲染成鱼骨结构：主要问题位于“鱼头”，原因沿“鱼骨”分支展开。该图类型自 Mermaid v11.12.3 起提供，官方语法文档见 docs/syntax/ishikawa.md（该文件由 packages/mermaid/src/docs/syntax/ishikawa.md 自动生成）。

语法要点：一行一个问题，缩进表达原因层级

Ishikawa 图遵循固定结构，官方文档给出的规则只有三条：

• 首行为事件（问题）本身；
• 其后各行为该事件的原因；
• “鱼骨”结构由缩进表达，缩进越深表示原因层级越细。

官方文档示例（完整内容见 docs/syntax/ishikawa.md）：

第一行Blurry Photo是问题，Process、User、Equipment、Environment是与问题同级的一级原因，Out of focus等进一步缩进的行为二级原因，LENS下的Inappropriate lens则是三级原因。渲染后，多个一级原因会形成沿主干两侧分布的鱼骨分支。

写一个可直接复现的鱼骨图

仓库的端到端用例 e2e/diagrams/ishikawa/2-should-render-with-many-causes-on-both-sides.mmd 给出了按“4M”分类的制造缺陷示例，是梳理原因时比较典型的组织方式：

若原因本身还有细分维度，可以用缩进继续下钻。e2e/diagrams/ishikawa/3-should-render-with-deeply-nested-causes.mmd 的服务器故障示例展示了三级原因：

这里Hardware、Software是两条主骨，Disk、Memory、Bug挂在主骨下，Bad sectors等是末端的具体原因。仓库用例还覆盖了单原因（4-should-render-with-a-single-cause.mmd）、仅问题无原因（5-should-render-with-no-children-root-only.mmd）以及 7 层深度嵌套（13-should-render-a-very-deep-nested-diagram.mmd）等边界情况，可以作为缩进写法对照。

在浏览器中渲染并验证

仓库提供了专用演示页 demos/ishikawa.html，其中把 Mermaid 文本放入<pre class="mermaid">并由mermaid.initialize({ startOnLoad: true })自动渲染。按其模式，最小页面结构如下（演示页中./mermaid.esm.mjs指向其本地构建产物，实际集成时替换为你项目中的 Mermaid 构建产物引用）：

<pre class="mermaid"> ishikawa-beta Blurry Photo Process Out of focus User Shaky hands </pre> <script type="module"> import mermaid from './mermaid.esm.mjs'; mermaid.initialize({ startOnLoad: true }); </script>

打开页面后按以下现象核对渲染是否成功：Blurry Photo出现在主干末端的问题位置，Process、User作为一级原因分支，Out of focus、Shaky hands作为二级原因挂在对应分支上，整体呈鱼骨骨架形状。

调整 padding、宽度与主题

Ishikawa 图有两个专属配置项，定义在配置模式 packages/mermaid/src/schemas/config.schema.yaml 的IshikawaDiagramConfig中：

diagramPadding可以通过图代码内的 frontmatter 覆盖，这是仓库用例 e2e/diagrams/ishikawa/9-should-render-with-custom-diagrampadding.mmd 的实际写法：

useMaxWidth对渲染结果的影响可以在端到端测试 e2e/rendering/ishikawa/ishikawa.spec.ts 中核对：配置为true时，输出 SVG 的width属性为100%且带max-width内联样式；配置为false时，SVG 使用固定的像素width/height。

主题与手绘风格则通过 frontmatter 或init指令指定。e2e/diagrams/ishikawa/7-should-render-with-forest-theme.mmd 和 8-should-render-with-dark-theme.mmd 展示了 frontmatter 方式：

demos/ishikawa.html 还展示了init指令方式，例如%%{init: { 'theme': 'forest' } }%%切换森林主题、%%{init: { 'look': 'handDrawn', 'handDrawnSeed': 1 } }%%启用手绘风格，两种写法二选一即可。

限制与注意

• 官方文档明确标注 Ishikawa 是 Mermaid 的新图类型（v11.12.3+ 引入，声明头为ishikawa-beta），其语法在后续版本中可能演进，升级 Mermaid 后建议重新核对渲染结果。
• 结构只由“行内容 + 缩进”表达，没有为原因添加说明文字、颜色或样式的语法；分组粒度完全依赖你对缩进层级的组织。
• 仅问题行、单原因、多层嵌套等边界输入均有用例覆盖，但渲染细节（分支在主干左右两侧的分布等）以实际浏览器输出为准。

【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid