如何在GitHub Markdown的表格行中嵌入Mermaid图表？

问题说明 #

在GitHub Markdown环境中，以下两种写法都能正常渲染Mermaid图表：

graph TD
A[(29L)] ~~~ C[(20L)]
B[(3L)]  ~~~ C[(20L)]

或是使用<pre>标签包裹的写法：

<pre lang="mermaid">
<code>graph TD
A[(29L)] ~~~ C[(20L)]
B[(3L)]  ~~~ C[(20L)]</code>
</pre>

但将这类Mermaid代码嵌入HTML表格的单元格时，图表无法正常渲染，示例代码如下：

<table>
  <tr>
    <td><pre lang="mermaid"><code>graph TD
A[(29L)] ~~~ C[(20L)]
B[(3L)]  ~~~ C[(20L)]</code></pre></td>
    <td>要得到20L需要执行：$(29, 0) \rightarrow (26, 3) \rightarrow (26, 0) \rightarrow (23, 3) \rightarrow (23, 0) \rightarrow (20, 3)$</td>
  </tr>
</table>

可行解决思路 #

GitHub的Mermaid渲染引擎对HTML嵌套结构的解析支持有限，尤其是表格单元格内的多层嵌套，可尝试以下方案：

1. 改用GitHub原生Markdown表格 #

放弃HTML表格，使用GFM原生表格语法，直接在单元格内插入Mermaid代码块，这种方式能保证渲染正常：

| Mermaid流程图 | 操作步骤 |
|--------------|----------|
| ```mermaid
graph TD
A[(29L)] ~~~ C[(20L)]
B[(3L)]  ~~~ C[(20L)]
``` | 要得到20L需要执行：$(29, 0) \rightarrow (26, 3) \rightarrow (26, 0) \rightarrow (23, 3) \rightarrow (23, 0) \rightarrow (20, 3)$ |

2. 简化HTML表格内的Mermaid代码结构 #

去掉多余的<code>标签，仅保留<pre lang="mermaid">包裹Mermaid代码，减少嵌套层级，部分场景下能触发正确渲染：

<table>
  <tr>
    <td><pre lang="mermaid">graph TD
A[(29L)] ~~~ C[(20L)]
B[(3L)]  ~~~ C[(20L)]</pre></td>
    <td>要得到20L需要执行：$(29, 0) \rightarrow (26, 3) \rightarrow (26, 0) \rightarrow (23, 3) \rightarrow (23, 0) \rightarrow (20, 3)$</td>
  </tr>
</table>

3. 用图片替代Mermaid代码块 #

如果前两种方法都无效，可以先通过本地或在线Mermaid工具生成图表图片，再将图片链接插入表格单元格：

<table>
  <tr>
    <td><img alt="20L取水流程图" src="替换为实际图表图片地址"></td>
    <td>要得到20L需要执行：$(29, 0) \rightarrow (26, 3) \rightarrow (26, 0) \rightarrow (23, 3) \rightarrow (23, 0) \rightarrow (20, 3)$</td>
  </tr>
</table>

内容的提问来源于stack exchange，提问作者armangrewal007