Getting Started

Usage and connection of mkdocs_puml is as seamless as it gets.

Installation

Install mkdocs_puml from PyPI

pip install mkdocs_puml

Then connect the plugin in mkdocs.yml file.

Public PlantUML serverPlantUML server with Docker

plugins:
  - plantuml:
      puml_url: https://www.plantuml.com/plantuml/

Run plantuml/plantuml-server server with Docker:

docker run -d -p 8080:8080 plantuml/plantuml-server:jetty

Then pass the URL to the local server via puml_url parameter:

plugins:
  - plantuml:
      puml_url: http://127.0.0.1:8080

That's it, mkdocs_puml is ready to use

Usage

Now, begin writing your documentation. mkdocs_puml will search all code fences with puml keyword and replace them with actual diagrams.

Change keyword

By default mkdocs_puml uses puml keyword. However, it can be changed with puml_keyword parameter.

plugins:
  - plantuml:
      puml_keyword: plantuml

For example, this code fence

```puml
@startuml
Bob -> Alice : hello
@enduml
```

will be rendered to

Interacting with Diagram

As you may have already noticed, when you hover the diagram few buttons appear in the top left corner:

• copies SVG content of the diagram.
• downloads SVG diagram.
• zooms in the diagram.
• resets the diagram to its default view.
• zooms out the diagram.

Additionally, mouse events control the zooming and panning of the diagram:

• Left Button + Mouse Move will trigger panning of the diagram.
• Shift + Scroll will trigger zooming of the diagram.

Try these actions for yourself!