4
4
[ ![ npm] ( https://img.shields.io/npm/v/gatsby-remark-mermaid.svg )] ( https://www.npmjs.com/package/gatsby-remark-mermaid )
5
5
[ ![ prettier] ( https://img.shields.io/badge/code_style-prettier-ff69b4.svg )] ( https://prettier.io )
6
6
7
- Create [ mermaid] ( https://mermaidjs.github.io/ ) graphs and diagrams in your markdown files.
7
+ Create [ mermaid] ( https://mermaidjs.github.io ) graphs and diagrams in your markdown files.
8
8
9
9
This plugin uses [ remark-mermaidjs] ( https://github.com/remcohaszing/remark-mermaidjs ) to generate
10
10
SVG diagrams at build time. The mermaid code blocks are replaced with an inline SVG in the generated
11
- HTML. This prevents any runtime dependencies on ` mermaid.js ` .
11
+ HTML. This prevents any runtime dependencies on ` mermaid ` .
12
+
13
+ ## Table of COntents
14
+
15
+ - [ Installation] ( #installation )
16
+ - [ Usage] ( #usage )
17
+ - [ Options] ( #options )
18
+ - [ ` browser ` ] ( #browser )
19
+ - [ ` css ` ] ( #css )
20
+ - [ ` errorFallback ` ] ( #errorfallback )
21
+ - [ ` launchOptions ` ] ( #launchoptions )
22
+ - [ ` mermaidConfig ` ] ( #mermaidconfig )
23
+ - [ ` prefix ` ] ( #prefix )
24
+ - [ Credits] ( #credits )
25
+ - [ License] ( #license )
12
26
13
27
## Installation
14
28
@@ -19,7 +33,7 @@ npm install gatsby-remark-mermaid gatsby-transformer-remark
19
33
## Usage
20
34
21
35
Configure this plugin as a plugin of
22
- [ gatsby-transformer-remark] ( https://www.gatsbyjs.com/plugins/gatsby-transformer-remark/ ) .
36
+ [ ` gatsby-transformer-remark ` ] ( https://www.gatsbyjs.com/plugins/gatsby-transformer-remark/ ) .
23
37
24
38
** NOTE:** Make sure you add this plugin ** before** any other plugins that process code blocks.
25
39
@@ -73,33 +87,14 @@ block is removed. The function receives the following arguments:
73
87
74
88
The options used to launch the browser. (` object ` )
75
89
76
- ### ` mermaidOptions `
90
+ ### ` mermaidConfig `
77
91
78
- The [ mermaid options ] ( https://mermaid- js.github.io/mermaid/#/Setup ) to use.
92
+ The [ mermaid config ] ( https://mermaid. js.org/config/setup/modules/config.html ) to use.
79
93
80
94
### ` prefix `
81
95
82
96
A custom prefix to use for Mermaid IDs. (` string ` , default: ` mermaid ` )
83
97
84
- ## How it works
85
-
86
- This plugin processes markdown code blocks set with ` mermaid ` as the language. It relies
87
-
88
- For example, this mermaid code block:
89
-
90
- ```` markdown
91
- ```mermaid
92
- graph LR
93
- install[Install Plugin]
94
- install --> configure[Configure Plugin]
95
- configure --> draw[Draw Fancy Diagrams]
96
- ```
97
- ````
98
-
99
- Generates the following SVG image:
100
-
101
- ![ example] ( https://github.com/remcohaszing/gatsby-remark-mermaid/raw/HEAD/example_graph.png )
102
-
103
98
## Credits
104
99
105
100
This package was originally developed by [ Thomas Biesaart] ( https://github.com/ChappIO ) .
0 commit comments