docsify-nomnoml

a docsify plugin to render nomnoml code fences

Install

Add the following scripts to the docsify index.html file - note that the peer-dependencies, nomnoml and graphre must be loaded before the plugin.

<script src="//cdn.jsdelivr.net/npm/graphre@0.1/dist/graphre.js"></script>
<script src="//cdn.jsdelivr.net/npm/nomnoml@1.4/dist/nomnoml.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-nomnoml@1/dist/plugin.min.js"></script>

Usage

To render a block, specify the code fence language as nomnoml or noml for short followed by a renderSvg instruction or render for short.

```nomnoml renderSvg
[Foo] -> [Bar]
```

or

```noml render
[Foo] -> [Bar]
```

Attributes

Some optional attributes may be specified after the render instruction:

• title - text to be rendered in the SVG <title/> - additionally set as the aria-label
• class - custom CSS class added to the SVG in addition to the default nomnoml-svg
• width - a width can be added to the SVG
• height - a height can be added to the SVG

```nomnoml renderSvg width=100% class=my-class title="My Diagram"
[Foo] -> [Bar]
```

Theming

By default the plugin will try to match the stroke and fill colors of the rendered SVG to the current theme. This may be overridden by explicity declaring custom CSS rules.

:root {
	--nomnoml-svg-stroke: <color>;
	--nomnoml-svg-fill-1: <color>;
	--nomnoml-svg-fill-2: <color>;
}

Alternatively, the theming can be completely disabled by setting:

window.$docsify = {
	// ...
	nomnoml: {
		autotheme: false,
	},
}

Directives

While directives may ordinarily be specified in nomnoml syntax, it may be preferable to define some of them globally such that they are consistently applied throughout a docsify instance. For example:

```noml render
#fontSize: 14
#arrowSize: 1.5
[Foo] -> [Bar]
```

Which can instead be specified on the $docsify configuration object.

window.$docsify = {
	// ...
	nomnoml: {
		directives: {
			fontSize: 14,
			arrowSize: 1.5,
		},
	},
}