# How to use the third-party packages:mermaid.min.js **URL:** \ **Category:** Help\ **Created:** [February 11, 2022, 7:28pm UTC](https://forums.ankiweb.net/t/how-to-use-the-third-party-packages-mermaid-min-js/17538 "2022-02-11T19:28:00Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![zyd199012](https://avatars.discourse-cdn.com/v4/letter/z/e480ec/32.png) [@zyd199012](https://forums.ankiweb.net/u/zyd199012)\ **Post date:** [February 11, 2022, 7:28pm UTC](https://forums.ankiweb.net/t/how-to-use-the-third-party-packages-mermaid-min-js/17538/1 "2022-02-11T19:28:00Z")
There is a flowchart package called [mermaid](https://mermaid-js.github.io/mermaid/#/usage). After I put `mermaid.min.js` in the folder :`**\Anki2\user\collection.media` I add a code in my **Back Template** : ```auto ``` This is my content of card: ```auto Here is another:
graph TD A[Client] -->|tcp_123| B(Load Balancer) B -->|tcp_456| C[Server1] B -->|tcp_456| D[Server2]
``` 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: ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/f/fcec5dd7ffad23fdd3745aa5b3c6e1ca93133e6a.png) Only 5% of the time this rendering failure screen appears: ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/3/3786de793d2c0ee74ec74eb5bedd68f0e387e2a2.png) 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： ![552cf30a097b0d7fea232b14b1b78c0](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/d/d7815f7538eb94a60737ce917241545f524e167b.jpeg) ---
**Author:** ![kleinerpirat](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kleinerpirat/32/19863_2.png) [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)\ **Post date:** [February 11, 2022, 10:09pm UTC](https://forums.ankiweb.net/t/how-to-use-the-third-party-packages-mermaid-min-js/17538/2 "2022-02-11T22:09:44Z")
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\]](https://forums.ankiweb.net/t/how-to-include-external-files-in-your-template-js-css-etc-guide/11719): > > In [another thread](https://forums.ankiweb.net/t/add-on-suggestion-itd-be-useful-if-anki-had-a-formatting-functionality-to-create-tooltips/11415/4) 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](https://ankiweb.net/shared/info/1840818335) 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. ---
**Author:** ![BlackBeans](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/blackbeans/32/2283_2.png) [@BlackBeans](https://forums.ankiweb.net/u/BlackBeans)\ **Post date:** [February 12, 2022, 2:38pm UTC](https://forums.ankiweb.net/t/how-to-use-the-third-party-packages-mermaid-min-js/17538/3 "2022-02-12T14:38:08Z")
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](https://graphviz.org/). This could even be automated by an add-on… ---
**Author:** ![zyd199012](https://avatars.discourse-cdn.com/v4/letter/z/e480ec/32.png) [@zyd199012](https://forums.ankiweb.net/u/zyd199012)\ **Post date:** [February 12, 2022, 6:02pm UTC](https://forums.ankiweb.net/t/how-to-use-the-third-party-packages-mermaid-min-js/17538/4 "2022-02-12T18:02:29Z")
Hi, I have thought about your solution (using other software to do it, or [mermaid-live-editor](https://mermaid.live/)), 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](https://ankiweb.net/shared/addons/2.1) that can do such a thing? But I didn’t search for it. ---
**Author:** ![BlackBeans](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/blackbeans/32/2283_2.png) [@BlackBeans](https://forums.ankiweb.net/u/BlackBeans)\ **Post date:** [February 12, 2022, 6:04pm UTC](https://forums.ankiweb.net/t/how-to-use-the-third-party-packages-mermaid-min-js/17538/5 "2022-02-12T18:04:26Z")
> [@zyd199012](#): > > Is there such [anki addon](https://ankiweb.net/shared/addons/2.1) 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). ---
**Author:** ![hxigang](https://avatars.discourse-cdn.com/v4/letter/h/45deac/32.png) [@hxigang](https://forums.ankiweb.net/u/hxigang)\ **Post date:** [January 18, 2023, 8:31am UTC](https://forums.ankiweb.net/t/how-to-use-the-third-party-packages-mermaid-min-js/17538/6 "2023-01-18T08:31:24Z")
想学习，能将前面部分做成详细教程吗？ ---
**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\ **Post date:** [May 1, 2023, 3:58am UTC](https://forums.ankiweb.net/t/how-to-use-the-third-party-packages-mermaid-min-js/17538/7 "2023-05-01T03:58:48Z")