remark-kroki

Remark plugin for showing Kroki diagram.

Installation

npm install remark-kroki --save-dev

Usage

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://localhost:8000',
    alias: ['plantuml']
  })
  .process(markdownText)
  .then((file) => console.info(file))
  .catch((error) => console.warn(error));

Docusaurus project

// docusaurus.config.js
module.exports = async function createConfig() {
  const { remarkKroki } = await import('remark-kroki');

  return {
    presets: [
      [
        'classic',
        {
          docs: {
            remarkPlugins: [
              [
                remarkKroki,
                {
                  // ...options here
                  alias: ['plantuml']
                }
              ]
            ]
          }
        }
      ]
    ]
  };
};

Options

Options.server

• type: string
• default: http://localhost:8000
• example: https://kroki.io

Using self host server by default. Set https://kroki.io to use free service.

Options.headers

• type: object
• default: {}

HTTP headers to send to the server for custom authentication.

Options.alias

• type: array
• default: []
• example: ['plantuml']

Alias code language name to treat as kroki code block, meta.type will be ignored.

Options.output

• type: string
• default: 'img-base64'
• enum: ['inline-svg', 'img-base64', 'object-base64']

How to embed SVG as image. See the different and risk on Best Way To Embed SVG.

Syntax

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)

Alias

```kroki type=plantuml
```
 ↓
```plantuml
```

Related

• markdown-code-block-meta
• remark-code-example
• remark-docusaurus