Integrate Mermaid diagrams

WriteFreely
1

As I was suggesting on Mastodon, it would be cool to integrate JavaScript-based diagramming functionality in addition to currently available MathJax into WriteFreely :nerd_face:

While using Gitea, a super-nice Git server, I noticed text-based (therefore easy to version) diagramming solution called MermaidJS - see it in action here.

Since we currently have MathJax which we can use in WriteFreely posts like this:

$\( ax^2 + \sqrt{bx} + c = 0 \)$

While we post code to be highlighted like this (mentioning language, like “sql” here, too):

```sql
SELECT version ();
```

The way how Gitea does if you specify “mermaid” as language in code block, it will render a diagram. Therefore posting:

```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
```

Would render a diagram like this.

Do you see such functionality as useful?

MermaidJS could be enabled as per-blog setting under “Text Rendering” settings :nerd_face:

5 Likes
2

I fully agree with this feature. I am a python developer and I don’t know much about frontend technologies, but If I can help, let me know!

3

I submitted a PR a year ago to add Goldmark as an optional Commonmark renderer. If that was done (or Goldmark replaced the current renderer entirely), Mermaid could likely be added as an option, as there’s a Mermaid plugin for Goldmark.

4

I find a method to add mermaid support into writefreely. It is very simple: