Skip to content
This repository was archived by the owner on Mar 30, 2025. It is now read-only.

Commit 801401c

Browse files
remcohaszingremcohaszing
committed
Initial commit
0 parents  commit 801401c

38 files changed

+7582
-0
lines changed

‎.editorconfig‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
end_of_line = lf
6+
indent_size = 2
7+
indent_style = space
8+
insert_final_newline = true
9+
max_line_length = 100
10+
trim_trailing_whitespace = true
11+
12+
[COMMIT_EDITMSG]
13+
max_line_length = 72

‎.eslintrc.yaml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
extends:
2+
- remcohaszing
3+
- remcohaszing/jest

‎.github/workflows/ci.yml‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
on:
2+
- pull_request
3+
- push
4+
5+
jobs:
6+
eslint:
7+
runs-on: ubuntu-latest
8+
steps:
9+
- uses: actions/checkout@v1
10+
- uses: actions/setup-node@v1
11+
with:
12+
node-version: 14
13+
- name: ESLint
14+
run: |
15+
yarn --frozen-lockfile
16+
yarn eslint .
17+
18+
jest:
19+
runs-on: ubuntu-latest
20+
strategy:
21+
matrix:
22+
node-version: [12, 14]
23+
steps:
24+
- uses: actions/checkout@v1
25+
- uses: actions/setup-node@v1
26+
with:
27+
node-version: ${{ matrix.node-version }}
28+
- name: Test
29+
run: |
30+
yarn --frozen-lockfile
31+
yarn test --coverage
32+
- uses: codecov/codecov-action@v1
33+
if: ${{ matrix.node-version == 14 }}
34+
35+
prettier:
36+
runs-on: ubuntu-latest
37+
steps:
38+
- uses: actions/checkout@v1
39+
- uses: actions/setup-node@v1
40+
with:
41+
node-version: 14
42+
- name: Prettier
43+
run: |
44+
yarn --frozen-lockfile
45+
yarn prettier .
46+
47+
tsc:
48+
runs-on: ubuntu-latest
49+
steps:
50+
- uses: actions/checkout@v1
51+
- uses: actions/setup-node@v1
52+
with:
53+
node-version: 14
54+
- name: TSC
55+
run: |
56+
yarn --frozen-lockfile
57+
yarn tsc

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
coverage/
2+
dist/
3+
node_modules/
4+
*.log
5+
*.tgz

‎LICENSE.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# MIT License
2+
3+
Copyright © 2021 Remco Haszing
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
6+
associated documentation files (the "Software"), to deal in the Software without restriction,
7+
including without limitation the rights to use, copy, modify, merge, publish, distribute,
8+
sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
9+
furnished to do so, subject to the following conditions:
10+
11+
The above copyright notice and this permission notice shall be included in all copies or substantial
12+
portions of the Software.
13+
14+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
15+
NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
16+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
17+
OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
18+
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# remark-mermaidjs
2+
3+
[![github actions][github actions badge]][github actions] [![codecov][codecov badge]][codecov]
4+
[![npm][npm badge]][npm] [![prettier][prettier badge]][prettier] [![jest][jest badge]][jest]
5+
6+
> A [remark][] plugin to render [mermaid][] diagrams using [puppeteer][].
7+
8+
## Installation
9+
10+
This package has a peer dependency on `puppeteer`.
11+
12+
```sh
13+
npm install puppeteer remark-mermaidjs
14+
```
15+
16+
Since this package uses Puppeteer, some system dependencies may need to be installed. Typically this
17+
is needed in a CI environment. The simplest way to do this us using
18+
[`install-chrome-dependencies`][install-chrome-dependencies]
19+
20+
## Usage
21+
22+
This plugin takes all code blocks marked as `mermaid` and renders them as an inline SVG.
23+
24+
```js
25+
const { readFileSync } = require('fs');
26+
27+
const remark = require('remark');
28+
const { remarkMermaid } = require('remark-mermaidjs');
29+
30+
remark()
31+
.use(remarkMermaid, {
32+
/* Optional options */
33+
})
34+
.process(readFileSync('readme.md'))
35+
.then((result) => {
36+
console.log(result.contents);
37+
});
38+
```
39+
40+
### Options
41+
42+
#### `launchOptions`
43+
44+
These options are passed to [`puppeteer.launch()`][puppeteer.launch].
45+
46+
#### `svgo`
47+
48+
These options are passed to the [SVGO][] constructor. Set to `null` to disable minifying using SVGO
49+
completely.
50+
51+
#### `theme`
52+
53+
The [mermaid theme] to use.
54+
55+
[codecov badge]: https://codecov.io/gh/remcohaszing/remark-mermaidjs/branch/master/graph/badge.svg
56+
[codecov]: https://codecov.io/gh/remcohaszing/remark-mermaidjs
57+
[github actions badge]: https://github.com/remcohaszing/remark-mermaidjs/workflows/NodeJS/badge.svg
58+
[github actions]: https://github.com/remcohaszing/remark-mermaidjs/actions
59+
[install-chrome-dependencies]: https://gitlab.com/appsemble/install-chrome-dependencies
60+
[jest badge]: https://jestjs.io/img/jest-badge.svg
61+
[jest]: https://jestjs.io
62+
[mermaid theme]: https://mermaid-js.github.io/mermaid/#/theming
63+
[mermaid]: https://mermaid-js.github.io
64+
[npm badge]: https://img.shields.io/npm/v/remark-mermaidjs
65+
[npm]: https://www.npmjs.com/package/remark-mermaidjs
66+
[prettier badge]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg
67+
[prettier]: https://prettier.io
68+
[puppeteer.launch]: https://pptr.dev/#?product=Puppeteer&show=api-puppeteerlaunchoptions
69+
[puppeteer]: https://pptr.dev
70+
[remark]: https://remark.js.org/
71+
[svgo]: https://github.com/svg/svgo

‎__fixtures__/dark/input.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# An example of a flowchart
2+
3+
```mermaid
4+
graph TD;
5+
A-->B;
6+
A-->C;
7+
B-->D;
8+
C-->D;
9+
```

‎__fixtures__/dark/options.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"theme": "dark"
3+
}

‎__fixtures__/dark/output.md‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
# An example of a flowchart
2+
3+
<svg xmlns="http://www.w3.org/2000/svg" height="233" style="max-width:124.640625px" fill="#ccc" font-family="&quot;trebuchet ms&quot;,verdana,arial,sans-serif" font-size="16" viewBox="0 0 124.641 233">
4+
<path fill="none" stroke="#d3d3d3" stroke-width="1.5" marker-end="url(#a)" d="M47.473 44.015L22.53 72v25"/>
5+
<defs>
6+
<marker id="a" markerHeight="6" markerUnits="strokeWidth" markerWidth="8" orient="auto" refX="9" refY="5" viewBox="0 0 10 10">
7+
<path fill="#d3d3d3" stroke-dasharray="1,0" d="M0 0l10 5-10 5z"/>
8+
</marker>
9+
</defs>
10+
<path fill="none" stroke="#d3d3d3" stroke-width="1.5" marker-end="url(#b)" d="M76.91 44.015L101.852 72v25"/>
11+
<defs>
12+
<marker id="b" markerHeight="6" markerUnits="strokeWidth" markerWidth="8" orient="auto" refX="9" refY="5" viewBox="0 0 10 10">
13+
<path fill="#d3d3d3" stroke-dasharray="1,0" d="M0 0l10 5-10 5z"/>
14+
</marker>
15+
</defs>
16+
<path fill="none" stroke="#d3d3d3" stroke-width="1.5" marker-end="url(#c)" d="M22.531 136v25l24.754 27.775"/>
17+
<defs>
18+
<marker id="c" markerHeight="6" markerUnits="strokeWidth" markerWidth="8" orient="auto" refX="9" refY="5" viewBox="0 0 10 10">
19+
<path fill="#d3d3d3" stroke-dasharray="1,0" d="M0 0l10 5-10 5z"/>
20+
</marker>
21+
</defs>
22+
<path fill="none" stroke="#d3d3d3" stroke-width="1.5" marker-end="url(#d)" d="M101.852 136v25l-24.754 27.775"/>
23+
<defs>
24+
<marker id="d" markerHeight="6" markerUnits="strokeWidth" markerWidth="8" orient="auto" refX="9" refY="5" viewBox="0 0 10 10">
25+
<path fill="#d3d3d3" stroke-dasharray="1,0" d="M0 0l10 5-10 5z"/>
26+
</marker>
27+
</defs>
28+
<g color="#ccc">
29+
<foreignObject width="0" height="0">
30+
<div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
31+
<span style="background-color:#585858;text-align:center"/>
32+
</div>
33+
</foreignObject>
34+
<foreignObject width="0" height="0">
35+
<div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
36+
<span style="background-color:#585858;text-align:center"/>
37+
</div>
38+
</foreignObject>
39+
<foreignObject width="0" height="0">
40+
<div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
41+
<span style="background-color:#585858;text-align:center"/>
42+
</div>
43+
</foreignObject>
44+
<foreignObject width="0" height="0">
45+
<div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
46+
<span style="background-color:#585858;text-align:center"/>
47+
</div>
48+
</foreignObject>
49+
</g>
50+
<g transform="translate(62.191 27.5)">
51+
<rect width="29.438" height="39" x="-14.719" y="-19.5" fill="#1f2020" stroke="#81b1db" rx="0" ry="0"/>
52+
<foreignObject width="9.438" height="19" color="#ccc" transform="translate(-4.719 -9.5)">
53+
<div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
54+
A
55+
</div>
56+
</foreignObject>
57+
</g>
58+
<g transform="translate(22.531 116.5)">
59+
<rect width="29.063" height="39" x="-14.531" y="-19.5" fill="#1f2020" stroke="#81b1db" rx="0" ry="0"/>
60+
<foreignObject width="9.063" height="19" color="#ccc" transform="translate(-4.531 -9.5)">
61+
<div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
62+
B
63+
</div>
64+
</foreignObject>
65+
</g>
66+
<g transform="translate(101.852 116.5)">
67+
<rect width="29.578" height="39" x="-14.789" y="-19.5" fill="#1f2020" stroke="#81b1db" rx="0" ry="0"/>
68+
<foreignObject width="9.578" height="19" color="#ccc" transform="translate(-4.79 -9.5)">
69+
<div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
70+
C
71+
</div>
72+
</foreignObject>
73+
</g>
74+
<g transform="translate(62.191 205.5)">
75+
<rect width="29.813" height="39" x="-14.906" y="-19.5" fill="#1f2020" stroke="#81b1db" rx="0" ry="0"/>
76+
<foreignObject width="9.813" height="19" color="#ccc" transform="translate(-4.906 -9.5)">
77+
<div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
78+
D
79+
</div>
80+
</foreignObject>
81+
</g>
82+
</svg>

‎__fixtures__/flowchart/input.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# An example of a flowchart
2+
3+
```mermaid
4+
graph TD;
5+
A-->B;
6+
A-->C;
7+
B-->D;
8+
C-->D;
9+
```

0 commit comments

Comments
 (0)