How to use the third-party packages:mermaid.min.js

There is a flowchart package called mermaid. After I put mermaid.min.js in the folder :**\Anki2\user\collection.media

I add a code in my Back Template:

<script src="mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

This is my content of card:

Here is another:
<div class="mermaid">
	graph TD 
	A[Client] --&gt;|tcp_123| B(Load Balancer) 
	B --&gt;|tcp_456| C[Server1] 
	B --&gt;|tcp_456| D[Server2]
</div>

I should reasonably be able to use this third-party packages successfully, but there is something strange going on now.

  1. When I click on PREVIEW, this rendering failure screen appears in 95% of the cases:

    Only 5% of the time this rendering failure screen appears:

    And I can not find any success and failure of the law
  2. The AnkiDroid will success to render every time, But the format rendering is problematic:

Including libraries with script tags is unreliable because the cards load content asynchronously. I think you’ll be better off importing them with a JS loading script.

I wrote this guide a few months ago, maybe it’s helpful:


Regarding the AnkiDroid rendering, you might have to tweak some CSS to achieve a better result.

2 Likes

Also, you might find it more reliable to simply write your flowcharts in an external file and exporting it as an image. This way, you’ll never fail to render it, and it will render equally well on every platform.
An easy-to-use and free software that does this kind of job is graphviz. This could even be automated by an add-on…

Hi, I have thought about your solution (using other software to do it, or mermaid-live-editor), but if there is something wrong with this deck, I have to go to another software to re-modify and export and replace the current deck again. I think it’s a lot of work. Also, may I ask what you mean by the last sentence? Is there such anki addon that can do such a thing? But I didn’t search for it.

No, but since generating an image from a graphviz source is literally I command away, it would be feasible to make an add-on that does what you need for you, without you having to resort to an external program (the add-on would generate the image on its own).