Initial commit

remcohaszing · Feb 17, 2021 · 801401c · 801401c
commit 801401c
Show file tree

Hide file tree

Showing 38 changed files with 7,582 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,13 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 100
+trim_trailing_whitespace = true
+
+[COMMIT_EDITMSG]
+max_line_length = 72
diff --git a/.eslintrc.yaml b/.eslintrc.yaml
@@ -0,0 +1,3 @@
+extends:
+  - remcohaszing
+  - remcohaszing/jest
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,57 @@
+on:
+  - pull_request
+  - push
+
+jobs:
+  eslint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: ESLint
+        run: |
+          yarn --frozen-lockfile
+          yarn eslint .
+
+  jest:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [12, 14]
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Test
+        run: |
+          yarn --frozen-lockfile
+          yarn test --coverage
+      - uses: codecov/codecov-action@v1
+        if: ${{ matrix.node-version == 14 }}
+
+  prettier:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Prettier
+        run: |
+          yarn --frozen-lockfile
+          yarn prettier .
+
+  tsc:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: TSC
+        run: |
+          yarn --frozen-lockfile
+          yarn tsc
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+coverage/
+dist/
+node_modules/
+*.log
+*.tgz
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,18 @@
+# MIT License
+
+Copyright © 2021 Remco Haszing
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+associated documentation files (the "Software"), to deal in the Software without restriction,
+including without limitation the rights to use, copy, modify, merge, publish, distribute,
+sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
+NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
+OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,71 @@
+# remark-mermaidjs
+
+[![github actions][github actions badge]][github actions] [![codecov][codecov badge]][codecov]
+[![npm][npm badge]][npm] [![prettier][prettier badge]][prettier] [![jest][jest badge]][jest]
+
+> A [remark][] plugin to render [mermaid][] diagrams using [puppeteer][].
+
+## Installation
+
+This package has a peer dependency on `puppeteer`.
+
+```sh
+npm install puppeteer remark-mermaidjs
+```
+
+Since this package uses Puppeteer, some system dependencies may need to be installed. Typically this
+is needed in a CI environment. The simplest way to do this us using
+[`install-chrome-dependencies`][install-chrome-dependencies]
+
+## Usage
+
+This plugin takes all code blocks marked as `mermaid` and renders them as an inline SVG.
+
+```js
+const { readFileSync } = require('fs');
+
+const remark = require('remark');
+const { remarkMermaid } = require('remark-mermaidjs');
+
+remark()
+  .use(remarkMermaid, {
+    /* Optional options */
+  })
+  .process(readFileSync('readme.md'))
+  .then((result) => {
+    console.log(result.contents);
+  });
+```
+
+### Options
+
+#### `launchOptions`
+
+These options are passed to [`puppeteer.launch()`][puppeteer.launch].
+
+#### `svgo`
+
+These options are passed to the [SVGO][] constructor. Set to `null` to disable minifying using SVGO
+completely.
+
+#### `theme`
+
+The [mermaid theme] to use.
+
+[codecov badge]: https://codecov.io/gh/remcohaszing/remark-mermaidjs/branch/master/graph/badge.svg
+[codecov]: https://codecov.io/gh/remcohaszing/remark-mermaidjs
+[github actions badge]: https://github.com/remcohaszing/remark-mermaidjs/workflows/NodeJS/badge.svg
+[github actions]: https://github.com/remcohaszing/remark-mermaidjs/actions
+[install-chrome-dependencies]: https://gitlab.com/appsemble/install-chrome-dependencies
+[jest badge]: https://jestjs.io/img/jest-badge.svg
+[jest]: https://jestjs.io
+[mermaid theme]: https://mermaid-js.github.io/mermaid/#/theming
+[mermaid]: https://mermaid-js.github.io
+[npm badge]: https://img.shields.io/npm/v/remark-mermaidjs
+[npm]: https://www.npmjs.com/package/remark-mermaidjs
+[prettier badge]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg
+[prettier]: https://prettier.io
+[puppeteer.launch]: https://pptr.dev/#?product=Puppeteer&show=api-puppeteerlaunchoptions
+[puppeteer]: https://pptr.dev
+[remark]: https://remark.js.org/
+[svgo]: https://github.com/svg/svgo
diff --git a/__fixtures__/dark/input.md b/__fixtures__/dark/input.md
@@ -0,0 +1,9 @@
+# An example of a flowchart
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
diff --git a/__fixtures__/dark/options.json b/__fixtures__/dark/options.json
@@ -0,0 +1,3 @@
+{
+  "theme": "dark"
+}
diff --git a/__fixtures__/dark/output.md b/__fixtures__/dark/output.md
@@ -0,0 +1,82 @@
+# An example of a flowchart
+
+<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">
+  <path fill="none" stroke="#d3d3d3" stroke-width="1.5" marker-end="url(#a)" d="M47.473 44.015L22.53 72v25"/>
+  <defs>
+    <marker id="a" markerHeight="6" markerUnits="strokeWidth" markerWidth="8" orient="auto" refX="9" refY="5" viewBox="0 0 10 10">
+      <path fill="#d3d3d3" stroke-dasharray="1,0" d="M0 0l10 5-10 5z"/>
+    </marker>
+  </defs>
+  <path fill="none" stroke="#d3d3d3" stroke-width="1.5" marker-end="url(#b)" d="M76.91 44.015L101.852 72v25"/>
+  <defs>
+    <marker id="b" markerHeight="6" markerUnits="strokeWidth" markerWidth="8" orient="auto" refX="9" refY="5" viewBox="0 0 10 10">
+      <path fill="#d3d3d3" stroke-dasharray="1,0" d="M0 0l10 5-10 5z"/>
+    </marker>
+  </defs>
+  <path fill="none" stroke="#d3d3d3" stroke-width="1.5" marker-end="url(#c)" d="M22.531 136v25l24.754 27.775"/>
+  <defs>
+    <marker id="c" markerHeight="6" markerUnits="strokeWidth" markerWidth="8" orient="auto" refX="9" refY="5" viewBox="0 0 10 10">
+      <path fill="#d3d3d3" stroke-dasharray="1,0" d="M0 0l10 5-10 5z"/>
+    </marker>
+  </defs>
+  <path fill="none" stroke="#d3d3d3" stroke-width="1.5" marker-end="url(#d)" d="M101.852 136v25l-24.754 27.775"/>
+  <defs>
+    <marker id="d" markerHeight="6" markerUnits="strokeWidth" markerWidth="8" orient="auto" refX="9" refY="5" viewBox="0 0 10 10">
+      <path fill="#d3d3d3" stroke-dasharray="1,0" d="M0 0l10 5-10 5z"/>
+    </marker>
+  </defs>
+  <g color="#ccc">
+    <foreignObject width="0" height="0">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+        <span style="background-color:#585858;text-align:center"/>
+      </div>
+    </foreignObject>
+    <foreignObject width="0" height="0">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+        <span style="background-color:#585858;text-align:center"/>
+      </div>
+    </foreignObject>
+    <foreignObject width="0" height="0">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+        <span style="background-color:#585858;text-align:center"/>
+      </div>
+    </foreignObject>
+    <foreignObject width="0" height="0">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+        <span style="background-color:#585858;text-align:center"/>
+      </div>
+    </foreignObject>
+  </g>
+  <g transform="translate(62.191 27.5)">
+    <rect width="29.438" height="39" x="-14.719" y="-19.5" fill="#1f2020" stroke="#81b1db" rx="0" ry="0"/>
+    <foreignObject width="9.438" height="19" color="#ccc" transform="translate(-4.719 -9.5)">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+        A
+      </div>
+    </foreignObject>
+  </g>
+  <g transform="translate(22.531 116.5)">
+    <rect width="29.063" height="39" x="-14.531" y="-19.5" fill="#1f2020" stroke="#81b1db" rx="0" ry="0"/>
+    <foreignObject width="9.063" height="19" color="#ccc" transform="translate(-4.531 -9.5)">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+        B
+      </div>
+    </foreignObject>
+  </g>
+  <g transform="translate(101.852 116.5)">
+    <rect width="29.578" height="39" x="-14.789" y="-19.5" fill="#1f2020" stroke="#81b1db" rx="0" ry="0"/>
+    <foreignObject width="9.578" height="19" color="#ccc" transform="translate(-4.79 -9.5)">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+        C
+      </div>
+    </foreignObject>
+  </g>
+  <g transform="translate(62.191 205.5)">
+    <rect width="29.813" height="39" x="-14.906" y="-19.5" fill="#1f2020" stroke="#81b1db" rx="0" ry="0"/>
+    <foreignObject width="9.813" height="19" color="#ccc" transform="translate(-4.906 -9.5)">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+        D
+      </div>
+    </foreignObject>
+  </g>
+</svg>
diff --git a/__fixtures__/flowchart/input.md b/__fixtures__/flowchart/input.md
@@ -0,0 +1,9 @@
+# An example of a flowchart
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
diff --git a/__fixtures__/flowchart/output.md b/__fixtures__/flowchart/output.md
@@ -0,0 +1,82 @@
+# An example of a flowchart
+
+<svg xmlns="http://www.w3.org/2000/svg" height="233" style="max-width:124.640625px" fill="#333" font-family="&quot;trebuchet ms&quot;,verdana,arial,sans-serif" font-size="16" viewBox="0 0 124.641 233">
+  <path fill="none" stroke="#333" stroke-width="1.5" marker-end="url(#a)" d="M47.473 44.015L22.53 72v25"/>
+  <defs>
+    <marker id="a" markerHeight="6" markerUnits="strokeWidth" markerWidth="8" orient="auto" refX="9" refY="5" viewBox="0 0 10 10">
+      <path stroke-dasharray="1,0" d="M0 0l10 5-10 5z"/>
+    </marker>
+  </defs>
+  <path fill="none" stroke="#333" stroke-width="1.5" marker-end="url(#b)" d="M76.91 44.015L101.852 72v25"/>
+  <defs>
+    <marker id="b" markerHeight="6" markerUnits="strokeWidth" markerWidth="8" orient="auto" refX="9" refY="5" viewBox="0 0 10 10">
+      <path stroke-dasharray="1,0" d="M0 0l10 5-10 5z"/>
+    </marker>
+  </defs>
+  <path fill="none" stroke="#333" stroke-width="1.5" marker-end="url(#c)" d="M22.531 136v25l24.754 27.775"/>
+  <defs>
+    <marker id="c" markerHeight="6" markerUnits="strokeWidth" markerWidth="8" orient="auto" refX="9" refY="5" viewBox="0 0 10 10">
+      <path stroke-dasharray="1,0" d="M0 0l10 5-10 5z"/>
+    </marker>
+  </defs>
+  <path fill="none" stroke="#333" stroke-width="1.5" marker-end="url(#d)" d="M101.852 136v25l-24.754 27.775"/>
+  <defs>
+    <marker id="d" markerHeight="6" markerUnits="strokeWidth" markerWidth="8" orient="auto" refX="9" refY="5" viewBox="0 0 10 10">
+      <path stroke-dasharray="1,0" d="M0 0l10 5-10 5z"/>
+    </marker>
+  </defs>
+  <g color="#333">
+    <foreignObject width="0" height="0">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+        <span style="background-color:#e8e8e8;text-align:center"/>
+      </div>
+    </foreignObject>
+    <foreignObject width="0" height="0">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+        <span style="background-color:#e8e8e8;text-align:center"/>
+      </div>
+    </foreignObject>
+    <foreignObject width="0" height="0">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+        <span style="background-color:#e8e8e8;text-align:center"/>
+      </div>
+    </foreignObject>
+    <foreignObject width="0" height="0">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+        <span style="background-color:#e8e8e8;text-align:center"/>
+      </div>
+    </foreignObject>
+  </g>
+  <g transform="translate(62.191 27.5)">
+    <rect width="29.438" height="39" x="-14.719" y="-19.5" fill="#ececff" stroke="#9370db" rx="0" ry="0"/>
+    <foreignObject width="9.438" height="19" color="#333" transform="translate(-4.719 -9.5)">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+        A
+      </div>
+    </foreignObject>
+  </g>
+  <g transform="translate(22.531 116.5)">
+    <rect width="29.063" height="39" x="-14.531" y="-19.5" fill="#ececff" stroke="#9370db" rx="0" ry="0"/>
+    <foreignObject width="9.063" height="19" color="#333" transform="translate(-4.531 -9.5)">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+        B
+      </div>
+    </foreignObject>
+  </g>
+  <g transform="translate(101.852 116.5)">
+    <rect width="29.578" height="39" x="-14.789" y="-19.5" fill="#ececff" stroke="#9370db" rx="0" ry="0"/>
+    <foreignObject width="9.578" height="19" color="#333" transform="translate(-4.79 -9.5)">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+        C
+      </div>
+    </foreignObject>
+  </g>
+  <g transform="translate(62.191 205.5)">
+    <rect width="29.813" height="39" x="-14.906" y="-19.5" fill="#ececff" stroke="#9370db" rx="0" ry="0"/>
+    <foreignObject width="9.813" height="19" color="#333" transform="translate(-4.906 -9.5)">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+        D
+      </div>
+    </foreignObject>
+  </g>
+</svg>
diff --git a/__fixtures__/fontawesome/input.md b/__fixtures__/fontawesome/input.md
@@ -0,0 +1,13 @@
+# Basic support for fontawesome
+
+It is possible to add icons from fontawesome.
+
+The icons are acessed via the syntax `fa:#icon class name#`.
+
+```mermaid
+graph TD
+    B["fa:fa-twitter for peace"]
+    B-->C[fa:fa-ban forbidden]
+    B-->D(fa:fa-spinner);
+    B-->E(A fa:fa-camera-retro perhaps?);
+```