I've always liked having my documentations diagrams embedded in my markdown files.

When i discovered nomnoml, i was impressed by it's simple yet clean appearance.

Here I introduce a remark plugin that allows you to embed nomnoml diagrams in your markdown files.

Installation🔗

npm install @zenobius/remark-nomnoml

Usage🔗

docs/decorator-pattern.md

# Decorator Pattern
 
Want to know how a pirates mind works? here's a diagram:
 
```nomnoml
#direction: down
#edges: rounded
#bendSize: 0.6
 
[<frame>Decorator pattern|
  [<abstract>Component||+ operation()]
  [Client] depends --> [Component]
  [Decorator|- next: Component]
  [Decorator] decorates -- [ConcreteComponent]
  [Component] <:- [Decorator]
  [Component] <:- [ConcreteComponent]
]
```
 
**yep**. aren't you glad you know this now?

render.js

import unified from 'unified';
import type { VFile } from 'vfile';
import { read } from 'to-vfile';
import markdown from 'remark-parse';
import nomnoml from '@zenobius/remark-nomnoml';
 
const processor = unified().use(markdown).use(nomnoml);
 
async function render(filename: string) {
  const file = await read(filename);
  return processor.processSync(file.value);
}
 
// ensure stdin is a filename
const filename = process.argv[2];
if (!filename) {
  console.error('usage: node render.js <filename>');
  process.exit(1);
}
 
// render stdin filename
const output = render(filename);
console.log(output);

you'll end up with

If that wasn't enough to convince you, here's the diagram on the official Nomnoml editor.