Mermaid - A Flowchart Plugin

plugins

(Paul Newell) #1

I am working on my first plugin but it is not working for me. Any help would be greatly appreciated. Here is a link to my git:

For this plugin to work you also need to add the following code before the closing head tag in the Customize section of Admin settings in Discourse:

<!-- Styles for the Mermaid (Flowchart) Plugin -->
<link rel="stylesheet" type="text/css" href="https://a1b162c9ba316380004223e5ebcd9fd144cbffea.googledrive.com/host/0B94LsQPLeilLfkxHY3djaE53TkEwcUZfbVY1MkxTa3Bpb25aclNhLWUzV2dLeEt4VlVFcWM/mermaid.min.css">

<!-- Custom Code to Remove <br> Tags from Mermaid (Flowchart) Posts -->
<script src="https://a1b162c9ba316380004223e5ebcd9fd144cbffea.googledrive.com/host/0B94LsQPLeilLfkxHY3djaE53TkEwcUZfbVY1MkxTa3Bpb25aclNhLWUzV2dLeEt4VlVFcWM/remove.mermaid.div.js"></script>

<!-- Code for the Mermaid (Flowchart) Plugin -->
<script src="https://a1b162c9ba316380004223e5ebcd9fd144cbffea.googledrive.com/host/0B94LsQPLeilLfkxHY3djaE53TkEwcUZfbVY1MkxTa3Bpb25aclNhLWUzV2dLeEt4VlVFcWM/mermaid.min.js"></script>

<!-- Code to Initialize the Mermaid (Flowchart) Plugin -->
<script>mermaid.initialize({startOnLoad:true});</script>

When the plugin is installed it raises an error and assets can’t be compiled. I am not sure why though.

The plugin is just supposed to wrap anything in the
[flowchart][/flowchart] tags in:

<div class="mermaid">" + contents + "</div>

Also, the “contents” should not be modified in any way (no html br or div tags added) as the text needs to be exactly as typed for the javascript to run correctly.


(Alan Tan) #2

You need to escape your double quotes or use single quotes to wrap the first portion of your JS string.


(Paul Newell) #3

Awesome! Thanks! Change made, testing now.


(Alan Tan) #4

Btw what was the error raised?


(Paul Newell) #5
<div>
<br>graph TD;<br>A[ISE when booking]--&gt;B;<br>B[Go to the Details tab of the Customer's profile / Employees profile]--&gt;C;<br>C["Check to see if there are any strange or special characters (letters, numbers, etc)"]--&gt;D;<br>D[If there are, remove them and try the booking again];<br>
</div>

This is what I get when I use the flowchart tags? It is still stripping the class and is is adding br tags not maintaining the text.


(Paul Newell) #6

Not sure about the error btw because it was actually discourse support that pointed it out before I ever tried installing it on my own system.


(Anton) #7

Has this plugin been implemented?