How to put mermaid diagrams in a table row in GitHub markdown?

Question

We can add Mermaid diagrams in GitHub markdown, using their own code block sytanx

Both of these work in GitHub:

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

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

But I want to add these diagrams in a table row.

Maybe like this:

<table>
  <tr>
    <td><pre lang="mermaid"><code>graph TD
A[(29L)] ~~~ C[(20L)]
B[(3L)]  ~~~ C[(20L)]</code></pre></td>
    <td>To get to 20L we need to: $(29, 0) \rightarrow (26, 3) \rightarrow (26, 0) \rightarrow (23, 3) \rightarrow (23, 0) \rightarrow (20, 3)$</td>
  </tr>
</table>

And this does not render correctly.
Do you have any suggestions? What would your approach be to this problem?

Answer 1

The reason your mermaid diagram is not rendering in the first column is because the LaTeX in the second column is preventing a line break and causes the second column to become too long. Consequently, when the first column becomes too small, Github shows only the mermaid code instead of rendering it. If we remove the LaTeX, we can see that that diagram renders fine:

Unfortunately we cannot change the size of each column with inline CSS because Github ignores the style attribute. I also tried using newlines in the latex code but this does not seem to work as well.

Possible solutions

Replace LaTeX with with unicode characters

Use the → instead of \rightarrow.

Use image instead of LaTeX

You can render your LaTeX code as an image using a tool like https://latexeditor.lagrida.com/. Then use the img HTML tag to place the image inside the cell. With this method you can change the width of the image.