Draw diagrams in markdown
This gridsome plugin allows you to draw diagrams by sketching the symbols using markdown. We embed the mermaid libary to do the drawing itself.
Once installed, we can embed mermaid code blocks in our markdown.
To generate a simple diagram, we can write:
diagram
graph LR
A --> B
B --> C
graph LR
A --> B
B --> C-
See mermaid for more examples.
-
Try out the mermaid editor.
Install
Follow the generic instructions for gridsome first.
bash
npm install gridsome-plugin-remark-diagrams
Usage
Configure gridsome.config.js to use the plugin.
transformers: {
remark: {
plugins: [
'gridsome-plugin-remark-diagrams',
// existing plugins //
]
}
}
Advanced Styling
The generated SVG is wrapped in <div class="mermaid"></div> to help you customize your styles.
When using the removeStyleTags attribute, you will need to import your Mermaid themes yourself.
Options
| Name | Default | Description |
|---|---|---|
| language | "diagrams" | The code block tag. |
| theme | "default" | "dark" |
| viewport.width | 200 | width of image |
| viewport.height | 200 | height of image |
| removeStyleTags | false | Remove all style tags from the generated SVG. If you use this option you will have to import the mermaid css at some point |
| id | mermaid-<currentTime> |
Sets the identifier of the SVG. Defaults to a unique ID based on the time of generation |
| mermaidOptions | {} | use custom mermaid configuration options to mermaid.initialize()
|
The default options are:
{
language: "mermaid",
theme: "default",
viewport: {
width: 200,
height: 200
},
id: null,
removeStyleTags: false,
mermaidOptions: {}
}Provenance / Credits
This plugin was forked, upgraded and adopted with gratitude to the original authors.
You can find the original versions here:
- Forked and upgraded from gridsome-remark-mermaid
- Originally inspired by gatsby-remark-mermaid