plantuml.html

{% if page.plantuml %}
<script src="//cdn.jsdelivr.net/npm/plantuml-encoder@1/dist/plantuml-encoder.min.js"></script>
<script>
    const umlTags = document.querySelectorAll('plantuml');
    umlTags.forEach((umlTag) => {
        // innerHTML gets a serialization of the nested child DOM elements, which returns angle
        // brackets that are not part of a tag as their HTML entities. Therefore, we need to undo
        // that. However, this also replaces any literal '&lt;' and '&gt;' with the corresponding
        // angle brackets.
        const plantuml = umlTag.innerHTML.replaceAll("&lt;", "<").replaceAll("&gt;", ">");

        const imgTag = document.createElement("img");
        imgTag.src = "//www.plantuml.com/plantuml/svg/" + window.plantumlEncoder.encode(plantuml);
        if (umlTag.dataset.alt) {
            imgTag.alt = umlTag.dataset.alt;
        }

        const figureTag = document.createElement("figure");
        figureTag.appendChild(imgTag);

        if (umlTag.dataset.caption) {
            const captionTag = document.createElement("figcaption");
            captionTag.appendChild(document.createTextNode(umlTag.dataset.caption));
            figureTag.appendChild(captionTag);
        }

        umlTag.parentNode.replaceChild(figureTag, umlTag);
    });
</script>
{% endif %}