Remark plugin for showing Kroki diagram.
npm install remark-kroki --save-dev
import readFileSync from 'node:fs';
import { remark } from 'remark';
import { remarkKroki } from 'remark-kroki';
const markdownText = readFileSync('example.md', 'utf8');
remark()
.use(remarkKroki, {
server: 'http:https://localhost:8000',
alias: ['plantuml']
})
.process(markdownText)
.then((file) => console.info(file))
.catch((error) => console.warn(error));
// docusaurus.config.js
module.exports = async function createConfig() {
const { remarkKroki } = await import('remark-kroki');
return {
presets: [
[
'classic',
{
docs: {
remarkPlugins: [
[
remarkKroki,
{
// ...options here
alias: ['plantuml']
}
]
]
}
}
]
]
};
};
- type: string
- default: http:https://localhost:8000
- example: https://kroki.io
Using self host server by default. Set https://kroki.io to use free service.
- type: object
- default:
{}
HTTP headers to send to the server for custom authentication.
- type: array
- default:
[]
- example:
['plantuml']
Alias code language name to treat as kroki code block, meta.type will be ignored.
- type: string
- default:
'img-base64'
- enum:
['inline-svg', 'img-base64', 'img-html-base64', 'object-base64']
How to embed SVG as image. See the different and risk on Best Way To Embed SVG.
Turn
```kroki type=plantuml
A --> B
```
Into
![plantuml](data:image/svg+xml;base64,xxxxxxxx)
Turn
```kroki type=plantuml alt=abc
A --> B
```
Into
![abc](data:image/svg+xml;base64,xxxxxxxx)
```kroki type=plantuml
```
↓
```plantuml
```