/docsify-kroki

A docsify plugin to render graph like plantuml, mermaid, ..etc

Primary LanguageTypeScriptMIT LicenseMIT

docsify-kroki

npm codecov GitHub branch checks state npm bundle size npm bundle size(ziped) GitHub top language GitHub last commit npm download count

Install

  1. Insert script into docsify document:
<script src="//unpkg.com/docsify-kroki"></script>

Usage

#Demo

## embedding it directly

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

```plantuml
@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
@enduml
```

## load from external files

![kroki-excalidraw](./docs/excalidraw.json)

Options

<script>
window.$docsify = {
  // default
  kroki: {
    langs: [
      "actdiag",
      "blockdiag",
      "bpmn",
      "bytefield",
      "c4plantuml",
      "d2",
      "dbml",
      "ditaa",
      "erd",
      "excalidraw",
      "graphviz",
      "mermaid",
      "nomnoml",
      "nwdiag",
      "packetdiag",
      "pikchr",
      "plantuml",
      "rackdiag",
      "seqdiag",
      "structurizr",
      "svgbob",
      "symbolator",
      "tikz",
      "vega",
      "vegalite",
      "wavedrom",
      "wireviz",
    ],
    // default
    serverPath: "//kroki.io/",
  },
}
</script>

langs

By default, those markdown language render by kroki:

actdiag blockdiag bpmn bytefield c4plantuml
d2 dbml ditaa erd excalidraw
graphviz mermaid nomnoml nwdiag packetdiag
pikchr plantuml rackdiag seqdiag structurizr
svgbob symbolator tikz vega vegalite
wavedrom wireviz

you can add more to langs array.

serverPath

By default, the official Kroki server is used. If you have your own, configure it using the serverPath option:

Example