Temando Magento plugin v1.7
temando / remark-mermaid Goto Github PK
View Code? Open in Web Editor NEWA remark plugin for Markdown that replaces mermaid graphs with rendered SVGs.
License: MIT License
A remark plugin for Markdown that replaces mermaid graphs with rendered SVGs.
License: MIT License
When using remark-mermaid
with remark-rehype
, class diagrams that contain <<annotations>>
result in a badly escaped output that causes mermaid to throw an error. For example:
classDiagram
class Shape{
<<interface>>
noOfVertices
draw()
}
class Color{
<<enumeration>>
RED
BLUE
GREEN
}
For anyone else encountering this error, we have a fixed fork available: https://www.npmjs.com/package/@dendronhq/remark-mermaid
Repository: https://github.com/dendronhq/remark-mermaid
We'd also be happy to get the fix merged here if this package is still maintained.
I am trying to use remark-mermaid with Docusaurus v2, which seems like it could be a very powerful combination.
However, by default remark-mermaid saves to the current directory. It would work if the remark plugin either ran the initialization script for mermaid.js when you use simple (not easy to insert that into markdown without swizzling, or at least I couldn't see that option in Docusaurus), or allowed you to more easily configure the save location for all images by passing it as an option at config time, just like the simple
option.
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: ```mermaid.comment
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
```
into
![](sha1here.svg "`mermaid` image")
<details><summary>Mermaid source</summary>
```mermaid.comment
sequenceDiagram
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.
.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.
mermaid changed quite a lot... cli package has move to a separate package https://github.com/mermaid-js/mermaid-cli
also it seems now possible to use mermaid directly by passing a string without the cli? ๐ค
mermaidAPI.initialize({
startOnLoad:true
});
$(function(){
const graphDefinition = 'graph TB\na-->b';
const cb = function(svgGraph){
console.log(svgGraph);
};
mermaidAPI.render('id1',graphDefinition,cb);
});
โ๏ธ http://mermaid-js.github.io/mermaid/#/mermaidAPI?id=render
we could work on a "update/rewrite" and publish it as a new major version?
would you accept such a "huge" change... or shell we publish under a different name? ๐
https://mermaidjs.github.io/#/sequenceDiagram?id=activations
Seems like the use of deactivate and activate break, must use shorthand. +/-
This plugin currently pulls in mermaid.cli
, which brings in puppeteer
, which installs in Chromium. This doesn't play nice in docker image which is based on Alpine.
The abstraction in mermaid.cli doesn't allow puppeteer's runtime settings to be altered, so while getting Chromium into the image is likely possible, we'd have no way to tell mermaid so that it can invoke puppeteer correctly.
Instead. Can we offer a simple mode in this plugin that simply takes:
```mermaid
graph LR
Start --> Stop
And transforms it to be:
<div class='mermaid'>
graph LR
Start --> Stop
</div>
This will rely on whatever is "generating the markdown" to ensure the mermaid JS file is available so that the graph can be generated client side, but it at least means that authors can start using the syntax now and the solution can be improved later.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.