embedded-trainings-2020/down-the-stack-book/node_modules/@kazumatu981/markdown-it-kroki

markdown-it-kroki

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.

Sample

---
marp: true
---


## plantuml

```plantuml[platuml image]
@startuml
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
@enduml
```

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

Detail

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.

```plantuml

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'