PlantUML Plugin for Typemill

This plugin allows you to generate PlantUML diagrams directly within your Typemill CMS content. It uses an external PlantUML server (defaulting to the public one) to render the diagrams within the robust flat-file architecture of Typemill.

Features

Renders PlantUML diagrams defined in your markdown files.
Configurable PlantUML server URL (supports self-hosted instances).
Configurable output format (SVG or PNG).
Uses standard fenced code blocks for security and compatibility.

GitHub Repository

The code repository of the PlantUML plugin can be found on GitHub.

Requirements

Typemill v2.21.3 or higher.
PHP 8.1 or higher.

Installation

Download the plugin.
Unzip the content.
Upload the folder plantuml to your Typemill plugins directory plugins.
The final path should be your-typemill-installation/plugins/plantuml.

Configuration

Login to your Typemill administration dashboard.
Go to System -> Plugins.
Activate the PlantUML plugin.
Click on Settings for the PlantUML plugin.
Server URL: Enter the URL of the PlantUML server. Default is http://www.plantuml.com/plantuml.
Output Format: Select SVG Vector (recommended) or PNG Image.
Transparent Background: Check this box to make the background transparent (works best with SVG).
Border Color: Enter a color (e.g., #393b41, black, red) to draw a border around the entire image. Leave empty for no border.
Save the settings.

Usage

Rendering Diagrams

Add a code block with the language identifier plantuml-diagram.
Write your standard PlantUML code inside the block.
You can optionaly provide visual parameters (align, padding, size).

Example:

```plantuml-diagram align="center" padding="10px" size="600px"
@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
@enduml
```

Result:

@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
@enduml

Supported Parameters:

align: Alignment of the graphic (e.g. center, left, right). Default is center.
padding: CSS padding to add around the graphic (e.g. 20px or 2rem).
size: Maximum width (CSS max-width) of the graphic in pixels or percentages (e.g. 100%, 500px).

The plugin will process any plantuml-diagram block and dynamically render it as an image in your browser.

Displaying Code

To display PlantUML code as a code block (without rendering it), use the standard plantuml identifier:

```plantuml
@startuml
Alice -> Bob: This will be displayed as code.
@enduml
```

This allows you to document PlantUML syntax or show examples without the plugin intercepting them.

License

This plugin is open-sourced software licensed under the MIT license.

Author & Attribution

Typemill CMS: This plugin is exclusively designed for the Typemill CMS, an open-source flat-file CMS for text-driven websites established by Trendschau. Typemill plantUML Plugin Wrapper: Created by Mark Klein. PlantUML Encoder Engine: The PlantUmlEncoder.php Deflate/Base64 logic is credited to Jawira Portugal (jawira/plantuml-encoding), licensed under the MIT License.

GitHub Repository: jawira/plantuml-encoding

Version Changelog

v1.5.2 (2026-05-30): removed twigFilter because it throws error if already registered.
v1.5.1 (2026-05-30): Used checkboxlabel for configuration in plugin settings.
v1.5.0 (2026-04-07): Introduced visual markdown block parameters (align, padding, size). Added intelligent offline caching (temp/) utilizing MD5 hashing to eliminate redundant remote server queries during eBook generation. Refactored HTML capturing arrays.
v1.4.0 (2026-04-07): Refactored rendering logic: Browser viewing now uses injected JavaScript to render diagrams, preserving original syntax within the DOM for future modifications. Ebook (PDF/epub) generation now fetches and embeds graphics as transient local files prior to document assembly to maximize compatibility.
v1.3.0 (2025-12-31): Added Ebook support via Twig filter plantuml. Implemented automatic centering using <figure> tags.
v1.2.0 (2025-12-31): Added changelog/history to documentation.
v1.1.0 (2025-12-31): Added configuration for transparent background (SVG) and custom border color.
v1.0.1 (2025-12-30): Changed syntax to fenced code blocks (```plantuml-diagram) for security and better theme compatibility. Added CSP whitelist support.
v1.0.0 (2025-12-30): Initial release.