You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
My use case may be a little different. I have a markdown doc that will be actively maintained, but mostly only viewed on github. I want to include mermaid graphs, but they will continue to be changed over time. My goals:
apply changes inline (no separate dist folder with compiled markdown)
keep a copy of the mermaid source that produced a diagram alongside the diagram
avoid muddying up the docs directory with a whole bunch of images
To that end, I created a fork that introduces the following options:
A plugin-level imageDir option that specifies where to put svgs, relative to the file including them.
A .comment modifier (perhaps .summary would be a better name?) that maintains a copy of the mermaid markup in the file. This is easier to understand if you can see it. It changes:
```mermaid.commentsequenceDiagram Alice ->> Bob: Hello Bob, how are you? Bob-->>John: How about you John?```
into
![](sha1here.svg"`mermaid` image")
<details><summary>Mermaid source</summary>
```mermaid.commentsequenceDiagram Alice ->> Bob: Hello Bob, how are you? Bob-->>John: How about you John?```
</details>
It is smart enough to not continue to apply that transformation on subsequent runs, and to update the image when the mermaid.comment block changes.
Finally, I added an .inline modifier, that turns images into base64 strings and uses a data:image/svg+xml;base64,... data-url instead of creating a file. But it turns out Github won't render inline svgs, so I'm not actually using that option.
If you'd like to include any of these, I'd be happy to prepare a PR. I have added tests for all the cases. In debugging my changes, there were several of them that would have been caught immediately by using typescript. If that's something you're open to, I'd also be happy to prepare a PR switching over to TS.
The text was updated successfully, but these errors were encountered:
My use case may be a little different. I have a markdown doc that will be actively maintained, but mostly only viewed on github. I want to include mermaid graphs, but they will continue to be changed over time. My goals:
dist
folder with compiled markdown)docs
directory with a whole bunch of imagesTo that end, I created a fork that introduces the following options:
imageDir
option that specifies where to put svgs, relative to the file including them..comment
modifier (perhaps.summary
would be a better name?) that maintains a copy of the mermaid markup in the file. This is easier to understand if you can see it. It changes:into
It is smart enough to not continue to apply that transformation on subsequent runs, and to update the image when the
mermaid.comment
block changes..inline
modifier, that turns images into base64 strings and uses adata:image/svg+xml;base64,...
data-url instead of creating a file. But it turns out Github won't render inline svgs, so I'm not actually using that option.If you'd like to include any of these, I'd be happy to prepare a PR. I have added tests for all the cases. In debugging my changes, there were several of them that would have been caught immediately by using typescript. If that's something you're open to, I'd also be happy to prepare a PR switching over to TS.
The text was updated successfully, but these errors were encountered: