hexo-tag-pintora

This plugin adds a tag {% pintora %}{% endpintora %} to generate diagrams using Pintora. Pintora generates a svg that is embedded in the HTML, so you can style it using CSS. No JavaScript is required once the page is generated.

Example

Installation

Currently available at GitHub registry

npm install @alessandroste/hexo-tag-pintora

Configuration

In _config.yaml:

pintora:
    textWidthRatio: 9
    background: transparent # or solid
    svgClass: diagram
    pintoraConfig: {} # the Config at https://pintorajs.vercel.app/docs/configuration/config/

Inline

{% pintora textWidthRatio:9 %}
...
{% endpintora %}

Theming

Since the svg is embedded in the HTML, you can style it using CSS.
The default class is diagram but it is overridable at configuration level.

svg.diagram {
    path {
        &:not([stroke-linejoin]) {
            fill: --diagram-fill;
        }

        stroke: --diagram-stroke;
    }

    path.label-bg {
        fill: --diagram-back-fill;
    }

    .activity__keyword circle {
        fill: --diagram-fill;
    }

    .activity__condition-end {
        fill: --diagram-fill;
    }

    text {
        fill: --diagram-fill;
    }

    text.activity__edge-label {
        fill: --diagram-fill;
    }
}