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 hexo-filter-plantuml with all npm packages installed. Try it out:

var hexoFilterPlantuml = require("hexo-filter-plantuml")

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

hexo-filter-plantuml v2.1.0

Using PlantUML to generate UML Diagram for hexo

@wafer-li 's hexo-filter-plantuml has been transfered to me duo to maintain issues.


version download

Features

  • Generate raw/base64/urlencoded svg at compile time, no external css and js required.
  • Privacy guarantee. Support rendering locally or self-hosted server.
  • Zero npm dependencies.

How Does it work

Install

npm install --save hexo-filter-plantuml

Minimum configuration

It will use plantuml.com for rendering, and the base64-encoded images will be inlined in the html.

plantuml:
    render: "PlantUMLServer"

Advanced configuration

Server-side(recommend)

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

plantuml:
    #  Local or PlantUMLServer.
    render: "PlantUMLServer"

    # the server,you can change your self-hosted sever for privacy
    server: "http://www.plantuml.com/plantuml"
    # "inline": <svg>xxx<svg/>
    # "inlineUrlEncode": <img src='data:image/svg+xml;> 
    # "inlineBase64": <img src='data:image/svg+xml;base64> 
    # "localLink": <img src="/assert/puml/xxxx.svg">
    # "externalLink": <img src="http://www.plantuml.com/plantuml/svg/xxx">
    link: "inline"

    # common options: svg/png
    outputFormat: "svg"

Client-side

plantuml:
    #  Local or PlantUMLServer.
    render: "Local"

    # "inline": <svg>xxx<svg/>
    # "inlineUrlEncode": <img src='data:image/svg+xml;> 
    # "inlineBase64": <img src='data:image/svg+xml;base64> 
    # "localLink": <img src="/assert/puml/xxxx.svg">
    link: "inline"

    # where your dot binary
    GraphvizDotFile: "/usr/local/bin/dot"
    # where your jar
    PlantJar: "/usr/local/Cellar/plantuml/1.2019.10/libexec/plantuml.jar"

    # common options: svg/png
    outputFormat: "svg"

How to use it?

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

@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 details at http://plantuml.com/sitemap-language-specification

Metadata

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