The remark-local-plantuml from mstroppel

Images in SVGs are not rendered

If a plantuml diagram contains an image, it is not rendered:

PlantUML:

!define AzurePuml https://raw.githubusercontent.com/plantuml-stdlib/Azure-PlantUML/master/dist

!includeurl AzurePuml/AzureCommon.puml
!includeurl AzurePuml/Compute/AzureFunction.puml

AzureFunction(test, "test", "test", "test")

SVG generated using node-plantuml:

Source:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="195px" preserveAspectRatio="none" style="width:131px;height:195px;" version="1.1" viewBox="0 0 131 195" width="131px" zoomAndPan="magnify">
    <defs>
        <filter height="300%" id="f1hffugpgh7vwj" width="300%" x="-1" y="-1">
            <feGaussianBlur result="blurOut" stdDeviation="2.0"/>
            <feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/>
            <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/>
            <feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/>
        </filter>
    </defs>
    <g>        <!--entity test-->
        <rect fill="#FFFFFF" filter="url(#f1hffugpgh7vwj)" height="175.5313" style="stroke: #3C7FC0; stroke-width: 1.5;" width="114" x="6" y="8.47"/>
        <text fill="#000000" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="94" x="16" y="30.927">«AzureFunction»</text>
        <text fill="#000000" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="28" x="49" y="50.1731">test</text>
        <image height="70" width="70" x="28" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAIAAAD+THXTAAADP0lEQVR4Xu3YvY7UMBQF4HlaXoFX4BV4haGli0RLswU10hQIUSABokCIAungjXey4f7Yx9dxZma1R7dKYsff3ngmOwc8uRzkgdvPM+kWsh/p7vOvQMlZiOxEOn3/o5dbrR+//8qJiOxE0sutVvoryFm47EGKtUjOQmcPkl5utWKPXM5wUqBF4UcuZzhp+vizqTo9GE1K69OLLtRdxxZaMpakF10uOT6UgaTWFvV8JKwzkKQXXaj+LbRkFKmpRZtsoSURUlrBVHvu9boLJQfPmaLUZlK6zYs3p1THD9/kuXOaWmQ+cmnyfJeAqo20eMoqvW6vyp6YqoEkPLkm9djwLTLXmo7ru5hXemFJpufl20/6k1cv3SsxMCdNmKbV9+JVFIn38C3SY5d0quok3pOO6KWbZW6hdXpUFRLvyRfr1etiloUOVYnU5OFbZA43E1O5pCYP6BZ5w70EVDap1UO2qLqFzLSqDFKrB3SL5DA6TSpJCnjIFslhjeFV/5ECHnAtKs9AhlQ9kmKedDa9kpUrtoXMMKoH0mS9WVU9mP8Q2rBVmY+rp1ouvieFPUyLekrvk5yy6hB73nKGtsjz5HiqNOpgnmA8Q1tU9uSkBeiVJ87h1bsv4uiR29DjWsR4cP6bisUnzv1eWjfqOG/KqfZNP65FpGf5L+b1+6/rFqWFPXziZdXx7KmqBrXI/IjTEd+EWbXs/8fvpfVFVVUanE4xxeNjnlzH1a8g8u1BX+2pyJCkHo94Vo13PD2mR6VXr2tDDzQJzsiYimnRth6YJDjjAyoNGO2BR4IzS5OKaRHznW6uxPOgQIIzF6/SgB08KJPgzMioqi0a5EGVBGfeqkob9vGAIcGZvaAqt2ioByQJzj08lWbs5gFPgnMnrSq0iPGcrF/VeQ+aSLBU4maFN3SNN9PpQSsJSiXOTvMbpC7Sk9PjQYCElUoc91rU5MkJexAjYX7i5SGnReaVTMIDgyQds0XhZfVkM5Ju0UU82IqkWxTbBptkG5Jo0QU92IQkWnRZDzYhrVt0cQ/6SesWXYMH/aSlRVfiQSdpaZF+k7hguki5RVflQQ8pt+jaPOghneYfh+XRK0icdLV5Jt1CniDpH1bk9SNFzprUAAAAAElFTkSuQmCC" y="53.6888"/>
        <text fill="#000000" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="25" x="50.5" y="136.1458">[test]</text>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="0" x="65" y="153.3157"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="23" x="51.5" y="170.9251">test</text>        <!--
@startuml





skinparam defaultTextAlignment center

skinparam wrapWidth 200
skinparam maxMessageSize 150

skinparam rectangle {
    StereotypeFontSize 12
}

skinparam Arrow {
    Color #666666
    FontColor #666666
    FontSize 12
}







sprite $AzureFunction [70x70/16z] {
xTI7RWCn30DGojIj___WJWE-yDnAC8GTPgy7nWkhUOUFB22D6gkeqaggb8oALLHfM8XBbf0c255H1HLLhA9AgwX2f4FNAZee2OtNjKaL-J_RTJ561lCN4Z6y
VkAJAkpozHF6o6cZYWwAdOE94QrYK2Q5c0vAXb44r4696KMqYY75A08Aac8KCHsKc554gm0HCqTCa9XHHAiOGcQEs3RIW0pZ3mJS_es_Cgw8Lfc7K8PF10mH
OTWVxuX5o8Zr3iVFmyiOCet0jkix1yvln7qmbaUQ-zw7u_n6RWpZwRclghsFgUmMQ_SmGDotyN8m4aO8WPX9837364amCH8mMiMcI8O9aGp324an4P9Y620v
PWbHXZEanGZ0yHsRdhm32HbynmUY31657R61A4F4QVtBWiWNSZ51rk8LYCaXknQlGAm2WLSWLe70An2JGtOjNe5O1O96rEITJm
}

skinparam rectangle<<AzureFunction>> {
    BackgroundColor #FFFFFF
    BorderColor #3C7FC0
}

rectangle "==test\n<color:#0072C6><$AzureFunction></color>\n//<size:12>[test]</size>//\n\n test" <<AzureFunction>> as test

@enduml

PlantUML version 1.2019.06(Fri May 24 19:10:25 CEST 2019)
(GPL source distribution)
Java Runtime: OpenJDK Runtime Environment
JVM: OpenJDK 64-Bit Server VM
Java Version: 21.0.1+12-LTS
Operating System: Windows 11
OS Version: 10.0
Default Encoding: UTF-8
Language: en
Country: US
-->    </g>
</svg>

SVG that is rendered (copied from source code of the final HTML page)

Source:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlnsXLink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="195px" preserveAspectRatio="none" style="width: 131px; height: 195px;" version="1.1" viewBox="0 0 131 195" width="131px" zoomAndPan="magnify">
    <defs>
        <filter height="300%" id="f1hffugpgh7vwj" width="300%" x="-1" y="-1">
            <feGaussianBlur result="blurOut" stdDeviation="2.0"></feGaussianBlur>
            <feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"></feColorMatrix>
            <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"></feOffset>
            <feBlend in="SourceGraphic" in2="blurOut3" mode="normal"></feBlend>
        </filter>
    </defs>
    <g>
        <rect fill="#FFFFFF" filter="url(#f1hffugpgh7vwj)" height="175.5313" style="stroke: rgb(60, 127, 192); stroke-width: 1.5px;" width="114" x="6" y="8.47"></rect>
        <text fill="#000000" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="94" x="16" y="30.927">«AzureFunction»</text>
        <text fill="#000000" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="28" x="49" y="50.1731">test</text>
        <image height="70" width="70" x="28" xLinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAIAAAD+THXTAAADP0lEQVR4Xu3YvY7UMBQF4HlaXoFX4BV4haGli0RLswU10hQIUSABokCIAungjXey4f7Yx9dxZma1R7dKYsff3ngmOwc8uRzkgdvPM+kWsh/p7vOvQMlZiOxEOn3/o5dbrR+//8qJiOxE0sutVvoryFm47EGKtUjOQmcPkl5utWKPXM5wUqBF4UcuZzhp+vizqTo9GE1K69OLLtRdxxZaMpakF10uOT6UgaTWFvV8JKwzkKQXXaj+LbRkFKmpRZtsoSURUlrBVHvu9boLJQfPmaLUZlK6zYs3p1THD9/kuXOaWmQ+cmnyfJeAqo20eMoqvW6vyp6YqoEkPLkm9djwLTLXmo7ru5hXemFJpufl20/6k1cv3SsxMCdNmKbV9+JVFIn38C3SY5d0quok3pOO6KWbZW6hdXpUFRLvyRfr1etiloUOVYnU5OFbZA43E1O5pCYP6BZ5w70EVDap1UO2qLqFzLSqDFKrB3SL5DA6TSpJCnjIFslhjeFV/5ECHnAtKs9AhlQ9kmKedDa9kpUrtoXMMKoH0mS9WVU9mP8Q2rBVmY+rp1ouvieFPUyLekrvk5yy6hB73nKGtsjz5HiqNOpgnmA8Q1tU9uSkBeiVJ87h1bsv4uiR29DjWsR4cP6bisUnzv1eWjfqOG/KqfZNP65FpGf5L+b1+6/rFqWFPXziZdXx7KmqBrXI/IjTEd+EWbXs/8fvpfVFVVUanE4xxeNjnlzH1a8g8u1BX+2pyJCkHo94Vo13PD2mR6VXr2tDDzQJzsiYimnRth6YJDjjAyoNGO2BR4IzS5OKaRHznW6uxPOgQIIzF6/SgB08KJPgzMioqi0a5EGVBGfeqkob9vGAIcGZvaAqt2ioByQJzj08lWbs5gFPgnMnrSq0iPGcrF/VeQ+aSLBU4maFN3SNN9PpQSsJSiXOTvMbpC7Sk9PjQYCElUoc91rU5MkJexAjYX7i5SGnReaVTMIDgyQds0XhZfVkM5Ju0UU82IqkWxTbBptkG5Jo0QU92IQkWnRZDzYhrVt0cQ/6SesWXYMH/aSlRVfiQSdpaZF+k7hguki5RVflQQ8pt+jaPOghneYfh+XRK0icdLV5Jt1CniDpH1bk9SNFzprUAAAAAElFTkSuQmCC" y="53.6888"></image>
        <text fill="#000000" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="25" x="50.5" y="136.1458">[test]</text>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="0" x="65" y="153.3157"></text>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="23" x="51.5" y="170.9251">test</text>
    </g>
</svg>

I suspect its due to some transformation by the svgr library that Docusaurus is using, but I am not sure.

Support for Docusaurus v3

The plugin is currently not compatible with Docusaurus v3.

Steps to reproduce

Create a new docusaurus app npx create-docusaurus@latest my-website classic
Install this plugin.
Try to render a simple plantuml in Markdown:

```plantuml Your title
class SimplePlantUMLPlugin {
    + transform(syntaxTree: AST): AST
}
```

Get an error

Notes

Its probably an issue caused by the migration to MDX v3: https://docusaurus.io/docs/migration/v3#upgrading-mdx

mstroppel / remark-local-plantuml Goto Github PK

remark-local-plantuml's People

Contributors

Stargazers

Watchers

Forkers

remark-local-plantuml's Issues

Images in SVGs are not rendered

update dependencies and acitvate dependabot

Support for Docusaurus v3

Steps to reproduce

Notes

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent