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

[zyd199012]

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：
   
   

[kleinerpirat]

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:

How to include external files in your template (JS, CSS, etc.) | [Guide]

In another thread I announced that I’ll create a guide on how to include external JavaScript libraries in a note template. I will use Tippy.js as an example, since it covers both the JavaScript and the CSS part. Update 01.08.21: The sample script has been updated to the format used by the Tippy Tooltips add-on. Disclaimer: JavaScript is not officially supported by Anki. Therefore, if you run into trouble, there are no official documents to help you out. Things might break in the future and if…

---

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

[BlackBeans]

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…

[zyd199012]

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.

[BlackBeans]

@zyd199012

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).

[hxigang]

想学习，能将前面部分做成详细教程吗？