52 lines
1.3 KiB
Markdown
52 lines
1.3 KiB
Markdown
|
---
|
||
|
|
title: Markdown-It Kroki
|
||
|
|
parent: Markdown-It Plugins
|
||
|
|
created: 2025-09-09T19:23
|
||
|
|
updated: 2025-09-22T13:27
|
||
|
|
---
|
||
|
|
|
||
|
|
# markdown-it-kroki
|
||
|
|
|
||
|
|
> This library was designed to embed [Kroki.io](https://kroki.io/) diagram into [Marp](https://marp.app/) slide decks!!
|
||
|
|
|
||
|
|
This library is a plugin for markdown-it to embed figure created by textual syntax.
|
||
|
|
To use this package, you can embed **Software Diagram** (like UML) written by **code** in Marp slide decks.
|
||
|
|
|
||
|
|
## Sample
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
@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 diagrams, you can use various syntaxes (such as [PlantUML](https://plantuml.com/) or [Mermaid](https://mermaid-js.github.io/mermaid/#/)) within fenced code blocks.
|
||
|
|
|
||
|
|
|
||
|
|
> [!NOTE]
|
||
|
|
> This package depends on [Kroki.io](https://kroki.io).
|
||
|
|
> If you want to know which **diagram languages are supported**,
|
||
|
|
> please check the official website at [https://kroki.io/](https://kroki.io/).
|
||
|
|
|
||
|
|
## References
|
||
|
|
|
||
|
|
- [markdown-it-kroki](https://github.com/kazumatu981/markdown-it-kroki)
|