1.1.1 • Public • Published


This library was designed to embed Kori.io diagram into Marp Slide-deks!!

This library is a pugin for markdown-it to embed figure is created by textual syntax. To use this package, You can embed Software Diagram (like uml) is written by code in Marp Slides-deck.

See marp sample code.


marp: true

## plantuml

```plantuml[platuml image]
left to right direction
actor Guest as g
package Professional {
actor Chef as c
actor "Food Critic" as fc
package Restaurant {
usecase "Eat Food" as UC1
usecase "Pay for Food" as UC2
usecase "Drink" as UC3
usecase "Review" as UC4
fc --> UC4
g --> UC1
g --> UC2
g --> UC3


If you want to write daigram, you write Diagram Language (like plantuml, mermaid.js) with in fenced code block.

How to install

You can install npm install command like bellow.

npm install -D @kazumatu981/markdown-it-kroki

How to use

Here is the how to use markdow-it-kroki. This section introduce how to create Marp slides-deck project, and introduce how to create Marp slides-deck server.

You can find deltail info in here, and you can learn about marp plugin eco-system, here.

[1st step] Create Slides-deck project

First, for create slides-deck, you have to prepair to Marp Project directory. So First, Create slides-deck project, and init npm package.

mkdir myslides
cd myslides

npm init -y

Secondary, Build Marp Environment. Install @marp-team/marp-cli.

npm install -D @marp-team/marp-cli

Off-course you can install as global package (like npm install -g @marp-team/marp-cli), or run at-once (like npx).

[2nd step] Download this project and install

git clone https://github.com/kazumatu981/markdown-it-kroki.git

cd myslides
npm install -D path/to/markdown-it-kroki

[3rd step] Create marp.config.js.

Here is the configuration file for Marp.

module.exports = {
    inputDir: './slides',
    engine: ({ marp }) => marp.use(require('@kazumatu981/markdown-it-kroki'), {
        entrypoint: "https://kroki.io",

[4th step] Create your slides

On slies directory. you create slides-deck. like this.

marp: true

## mermaid

```mermaid[mermaid image]
flowchart TD
    Start --> Stop

[5th step] run server

Run marp server.

marp -s -c marp.config.js


Syntax of Markdown

Diagram Language

You have to write diagram language by fenced code block syntax, start with triple back quot and after that the language.


This package depends on kroki.io. If you want to know which is supported diagram language, you will see in Kroki.io official web site (https://kroki.io/).

Alt Text

You can write Alt-text attribute to IMG tag in HTML. Write in square blacket after Diagram Language.

```mermaid [check your network config..]

Options of constructor

property-name type mean defaul value
entrypoint string The entry point for Kroki server. 'https://kroki.io'
containerClass string class name of container (DIV-tag class attribute). 'kroki-image-container'
imageFormat string image format of diagram. see here 'svg'


npm i @kazumatu981/markdown-it-kroki

DownloadsWeekly Downloads






Unpacked Size

79 kB

Total Files


Last publish


  • kazumatu981