This plugin adds the Mermaid JS library to Discourse so that posts can make use of its features. It turns this:
[mermaid]
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
[/mermaid]
I’d love to, especially because I’m suspicious that might make the rendering more reliable. However, I can’t see how this happens, can you point me to something more specific?
Thanks @j.jaffeux ! As you saw, I merged in your PR and the results are far superior. The charts now load reliably and nearly instantly. I’ve updated the OP along these lines.
Really love this plugin, it is very fun to use when you get instant updates in the editor preview pane
Is there an easy way to make the plugin work better with dark themes?
I’ll add one more thing to my wishlist, it would be great to have a composer button for Mermaid that could insert some example charts and have a link to the documentation site to make it easier for new users to discover all the functionality of the script.
I started looking for a generic toolbar customizer plugin to insert the snippets I need but it doesn’t look like anyone has made one. It would probably make more sense for each plugin to manage their own toolbar extensions anyway.
I totally agree, the instant updates in the preview pane are awesome!
I see how it doesn’t look great with the Dark theme . Unfortunately, I don’t have the know how or capacity to work on a fix for that. However, I would gladly accept a PR that introduces a solution.
Mermaid has a few themes in their repo, which I imagine you’d be able to select either with a site setting or something. My wild guess would be that this turns into
mermaid.init({ theme: 'dark' }, $mermaid)
Unfortunately none of the current ones (options are ‘dark’, ‘forest’, and ‘neutral’) really look good with DIscourse’s dark theme (they all have black text labels), so my recommendation here for someone willing to work on this (not me sorry )
كل شيء على ما يرام في mermaid.live
هذا اختبار لهذه العينة:
flowchart LR
subgraph "One"
a("`\"**القط**
في القبعة\"`") -- "تسمية الحافة" --> b{{"`\"**الكلب** في الخنزير\"`"}}
end
subgraph "`**اثنان**`"
c("`\"**القط**
في القبعة\"`") -- "`تسمية حافة **عريضة**`\" --> d("الكلب في الخنزير")
end
لدينا مكون السمة Discourse Mermaid هنا في Meta بدلاً من المكون الإضافي، ويمكنني رؤية نتيجة مماثلة باستخدام المثال:
flowchart LR
subgraph "One"
a("`The **cat**
in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
end
subgraph "`**Two**`"
c("`The **cat**
in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
end
أنا لا أتبع المثال المرتبط، حيث لا يبدو أنه يعرض النص الغامق/المائل في المخطط الانسيابي النهائي: (على الرغم من أنه لا يعرض تنسيق Markdown نفسه)
. Unfortunately, I don’t have the know how or capacity to work on a fix for that. However, I would gladly accept a PR that introduces a solution.
)
