Skip to content

Commit 7669eda

Browse files
committed
Update readme
1 parent 0a88ea9 commit 7669eda

File tree

2 files changed

+19
-24
lines changed

2 files changed

+19
-24
lines changed

README.md

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,25 @@
44
[![npm](https://img.shields.io/npm/v/gatsby-remark-mermaid.svg)](https://www.npmjs.com/package/gatsby-remark-mermaid)
55
[![prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io)
66

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.
88

99
This plugin uses [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs) to generate
1010
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)
1226

1327
## Installation
1428

@@ -19,7 +33,7 @@ npm install gatsby-remark-mermaid gatsby-transformer-remark
1933
## Usage
2034

2135
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/).
2337

2438
**NOTE:** Make sure you add this plugin **before** any other plugins that process code blocks.
2539

@@ -73,33 +87,14 @@ block is removed. The function receives the following arguments:
7387

7488
The options used to launch the browser. (`object`)
7589

76-
### `mermaidOptions`
90+
### `mermaidConfig`
7791

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.
7993

8094
### `prefix`
8195

8296
A custom prefix to use for Mermaid IDs. (`string`, default: `mermaid`)
8397

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-
10398
## Credits
10499

105100
This package was originally developed by [Thomas Biesaart](https://github.com/ChappIO).

example_graph.png

-5.91 KB
Binary file not shown.

0 commit comments

Comments
 (0)