I try to keep html and javascript out of the markdown as part of the whole point is to not make writers know that stuff. Many of the authors I work with aren’t web devs so I don’t want to ask them to copy and paste special code beyond what mermaid requires.
Instead I just use GitLab where it works great. This is just an example of GitHub being a bit behind but am hopeful that they’ll eventually come up to speed. Especially since they have it in their markdown preview.
Yes! If you're making a product for "pure" writers, I'm with you almost 100%.
That being said, Markdown has always included the ability to insert custom HTML, because Gruber wrote it to scratch his own itch. He didn't make Markdown to hide HTML from himself, he made it to do away with all the ceremony of angle brackets, which are a PITA to type and definitely make the result harder to read from source.
From a readability standpoint, I'd prefer:
```mermaid
stateDiagram
[*] --> start
start --> zero : 0
start --> one : 1
one --> one : 0, 1
zero --> [*]
one --> [*]
```
to:
<div class="mermaid">
stateDiagram
[*] --> start
start --> zero : 0
start --> one : 1
one --> one : 0, 1
zero --> [*]
one --> [*]
</div>
But I can deal with that. What discomforts me personally is the worry that something about the mermaid.js implementation will break in a future browser version.
Were I compiling to SVG or PNG as part of my build tooling, I would have a lot more trust that I could maintain a working toolchain in the future.
Instead I just use GitLab where it works great. This is just an example of GitHub being a bit behind but am hopeful that they’ll eventually come up to speed. Especially since they have it in their markdown preview.