Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gitbook-plugin-graphviz-and-plant-uml with all npm packages installed. Try it out:

var gitbookPluginGraphvizAndPlantUml = require("gitbook-plugin-graphviz-and-plant-uml")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gitbook-plugin-graphviz-and-plant-uml v1.0.6

Generate PlantUML with quick installation

Render GraphViz and PlantUML offline.

version download

Features

  • Rendering PlantUML from local or server.
  • Support PDF exporting.
  • ZERO npm dependency.

How Does it work

  1. Your UML/Diagram string quote with PlantUML/DOT
  2. run exec file and get output
  3. SVG(XML) file

Pre Installation

Server Side

Nothing but same as https://github.com/qjebbs/vscode-plantuml#requirements-for-plantumlserver-render

Client Side

  • Java is a cross-platform Virtual Machine, which is install on Mac/Linux by default.
  • Graphviz is open source graph visualization software. It has several main graph layout programs.
  • plantuml can easily create UML Diagrams from simple textual description.

We need to install these tools before rendering UML.

If your are Mac user, try with brew

brew install graphviz
brew install plantuml

If your are the other OS user, install them manually on official website or package manager(eg, yum install graphviz).

Installation for Gitbook

In your book.json

Server Side Rendering

Please keep in mind, if you want more about privacy/safety, please replace your own LOCAL render server.

{
  "plugins": ["graphviz-and-plant-uml"],
  "pluginsConfig": {
    "graphviz-and-plant-uml": {
      "Render": "PlantUMLServer",
      "Server": "http://www.plantuml.com/plantuml"
    }
  }
}

Client Side Rendering

{
  "plugins": ["graphviz-and-plant-uml"],
  "pluginsConfig": {
    "graphviz-and-plant-uml": {
      "GraphvizDotFile": "/usr/local/opt/graphviz/bin/dot",
      "PlantJar": "/usr/local/Cellar/plantuml/1.2018.12/libexec/plantuml.jar"
    }
  }
}

And all, finally

then

# install plugin
gitbook install
# run the gitbook
gitbook serve

How to use it?

{% puml %}
@startuml
Object <|-- ArrayList
Object : equals()
ArrayList : Object[] elementData
ArrayList : size()
@enduml
{% endpuml %}

@startuml and @endpuml are ALWAYS required or the image will fail to be generated.

or

```puml
@startuml
Object <|-- ArrayList
Object : equals()
ArrayList : Object[] elementData
ArrayList : size()
@enduml
```

Plugin will pick up block body and replace it with generated base64 svg diagram.

puml and plantuml tags both work.

see more at Jetbrains's Visualizing Diagrams

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free