Add support for diagrams.net (draw.io)

[ggrossetie]

Input

<mxfile host="app.diagrams.net" modified="2020-10-03T15:11:57.367Z"
        agent="5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36"
        etag="11WjPOqNS_m0kgKlksbF" version="13.7.7" type="device">
  <diagram id="khsTyrV5h37nCq-FAsyN" name="Page-1">
    jZJNT8MwDIZ/TY6T2gb2caUMKgHiMAHTLihrTBMprassIx2/npS67appElIO8eOPxK/NeFo2j1bU6gUlGJZEsmH8niVJfJMkrD2RPHVkGS07UFgtKWgEG/0DBCOiRy3hMAl0iMbpegpzrCrI3YQJa9FPw77QTF+tRQEXYJMLc0k/tHSKukgWI89AF6p/OZ6vOk8p+mDq5KCERH+G+Jrx1CK67lY2KZhWvF6XLu/hinf4mIXK/Sfh/W32vKhXO8w+n+rtbpv5/euMqnwLc6SGs5CFAXm0Qaru5+7Uy2HxWEloK0aM33mlHWxqkbdeHxYgMOVKE6w4XKk2WAfN1U/HgxRhhwBLcPYUQiiB35J6tD58SbYfhxH3CquzQcyJCZp/MZQeJQoXUqk3x2n8+c52mq9/AQ==
  </diagram>
</mxfile>

Output

Please note that diagrams.net has an online viewer where the diagram hash (base64 deflate?) is used. The URL seems to be https://viewer.diagrams.net/?highlight=0000ff&edit=_blank&layers=1&nav=1#R + diagram hash.

For instance: https://viewer.diagrams.net/?highlight=0000ff&edit=_blank&layers=1&nav=1#RjZJNT8MwDIZ/TY6T2gb2caUMKgHiMAHTLihrTBMprassIx2/npS67appElIO8eOPxK/NeFo2j1bU6gUlGJZEsmH8niVJfJMkrD2RPHVkGS07UFgtKWgEG/0DBCOiRy3hMAl0iMbpegpzrCrI3YQJa9FPw77QTF+tRQEXYJMLc0k/tHSKukgWI89AF6p/OZ6vOk8p+mDq5KCERH+G+Jrx1CK67lY2KZhWvF6XLu/hinf4mIXK/Sfh/W32vKhXO8w+n+rtbpv5/euMqnwLc6SGs5CFAXm0Qaru5+7Uy2HxWEloK0aM33mlHWxqkbdeHxYgMOVKE6w4XKk2WAfN1U/HgxRhhwBLcPYUQiiB35J6tD58SbYfhxH3CquzQcyJCZp/MZQeJQoXUqk3x2n8+c52mq9/AQ==

Format:

• hello.svg
• hello.png
• hello.jpeg
• hello.pdf
• hello.vsdx (beta)

Runtime

JavaScript

Project

https://github.com/jgraph/mxgraph2

[ggrossetie]

I took a look at https://github.com/jgraph/drawio and here's my report:

• diagrams.net uses client-side (browser) export
• with a few changes to export.js it's possible to use Puppeteer to load export3.html and convert a diagram
  • Chrome 90+ does not load the diagram properly using file:// protocol (even when if I forcibly disable web security) but it does work when using http://. It's interesting to note that Firefox 87 does load the diagram properly using file:// or http://.
• diagrams.net provides a CLI as part of the Electron Desktop application
  • It take approximately ~1 second to convert Wireframe.xml to SVG
  • It's not possible to pass the input as stdin
  • It's not possible to output the result as stdout

Since diagrams.net CLI is relatively fast (and will require less maintenance), I think we should either install it as part of yuzutech/kroki or build a small HTTP server on top of the CLI and package it in a new Docker image yuzutech/diagramsnet.

For reference, @rlespinasse did some work to provide diagrams.net CLI as a Docker image: https://github.com/rlespinasse/docker-drawio-desktop-headless We can take some inspiration from this, most notably to disable auto-update functionality and clear output log from Electron.

[fperk]

Hi, is there any update on this proposal?

[ggrossetie]

We are waiting for an upstream change to be able to integrate it cleanly: https://github.com/jgraph/drawio/issues/1946

You can vote for this issue, maybe it will get some attention.

[rdmueller]

just saw this container which might help create a solution: https://hub.docker.com/r/tomkludy/drawio-renderer

it seems that the draw.io CLI has a huge number of dependencies which are all resolved in the container image.

[amadeus-torwell]

Seems like you got an answer there, did you have a look?

[ggrossetie]

Yes, I have a working prototype but still a lot of work is needed to ensure a smooth integration. If someone could provide real world diagrams created by https://www.diagrams.net/ that would be helpful. I will be able to make sure that I get the same export. I'm especially looking for diagrams that use icons, complex layout, and so on.

[amadeus-torwell]

There are a lot of demo diagrams available (see screenshot) - would that be helpful?

[shah]

@deusama @Mogztter this is an interesting blog post which gives another rendering option: Truly headless draw.io exports. We could use Kroki's draw.io renderer and would love to try it out when it's ready.

Thanks for the great work @Mogztter!

[ggrossetie]

There are a lot of demo diagrams available (see screenshot) - would that be helpful?

I'm already using them to test but I would like to try on real-world diagrams.

this is an interesting blog post which gives another rendering option: Truly headless draw.io exports.

Thanks for sharing this article, that's basically what we are already doing in Kroki, using Chrome headless (via Puppeteer) to generate diagrams.

The main issue with diagrams.net/draw.io is that it uses foreignObject tag in SVG. In other words, if you generate a SVG from a diagrams.net diagram, you will need a browser to render the generated SVG correctly.

Here's an example:

Browser	SVG viewer

Please note that this is not related to Kroki since you will get the same result using app.diagrams.net, so I think it's fine. The only difference is that I don't get the mention "Text is not SVG - cannot display" at the bottom of the SVG.

[rdmueller]

@Mogztter in case you haven't seen the FAQ and as reference: https://www.diagrams.net/doc/faq/svg-export-text-problems

[ggrossetie]

Interesting, I didn't know you could disable complex HTML labels (foreignObject) on diagrams.net, that's cool!

Instead, you will see a short version of the label and a warning Text is not SVG - cannot display at the bottom of the SVG export. This warning can be suppressed by using the svg-warning=0 URL parameter.

I guess, in my configuration, svg-warning is disabled by default. I wonder if we should disable it by default or not...?

In the meantime, consider exporting your diagram to a PDF file and then import that PDF into a tool like Inkscape. This will give SVG labels.

That's a solution but it's costly. I don't think Kroki should export to PDF then use inkscape (CLI) to convert it to SVG. That would probably be too much (at least for the first iteration).

Anyway, we should definitely keep this link and add it in the Kroki documentation once we add support for diagrams.net.

[amadeus-torwell]

Following up on this one - do you think it makes sense to add drawio support with a beta flag attached to it? Just to use the momentum and get more real-world feedback from people?

In that case what would be the strategy to add it to kroki at that stage - your approach with headless exports seems promising.

[HenriAtWork]

There is a command line tool to render drawio https://j2r2b.github.io/2019/08/06/drawio-cli.html Also see https://github.com/asciidoctor/asciidoctor-diagram/issues/213

The ability to support draw.io would really increase the usability of AsciiDoc and therefore potentially increase the user base of the Kroki plugin collection

[ggrossetie]

Experimental support will land on the next release.

diagrams.net will be available as a companion container (yuzutech/kroki-diagramsnet) but will not be available on https://kroki.io right away. Once we have enough feedback, I will see if I can enable it on the public instance. Since we are very close to the memory limit, we will probably need to add more memory to run this additional container. Currently, Exoscale and all the sponsors do not cover all the expenses of the public instance, the remaining balance is around 40€/month. Upgrading from medium instances (4Gb - 2 cores) to large (8gb - 4 cores) will increase the cost by 60€/month. So unless I can find additional sponsors or convince Exoscale to give me more processing power it won't happen 😞

[arukiidou]

Great feature! When kroki-diagramsnet is released, I want to use also it in gitlab!

[arukiidou]

I tried it. it seems to work, but It lost the C4 themes in the diagram.

http://kroki.io/diagramsnet/png/eNo1Vkeu7IYRvMrgrSSM9ZjJofT_BxiGw0wOM7ljzjlzad3CJ_HCt_kX8TMkbxuoQjVQXV3f2iMrm_RW9PPy_ePZpPEy9d3Hre2TMivT5PsHDMLwbyDyG4xbEPg7iPwOQZ8gBAcftzBPuy8Q9gnefnHLLun3-aZaNwj8BP-4fQ1w9I_bgaO_3qhhaFI3jaRyATCE-ETw2y8SbynyP25NWae3VxrX_a-3ZAr3z7IHIOIT_oRuTDH1bQqQ-Cf4ieI4-gkR6O3_CgEI__zScTPDLJzKv1k_bukS5t8_FHrEEuyBBkEgg1pmVaaOfty2dJrLvvv-8Rf_x205h_T7R5JuZZx-_PiWlGE-he2t_Fq6nNFO6nqGqDsJWaL2OWjyx60L2y_Azz__9fPP__z857-hjx9EsCwJLqCcEgOVCUQ7quXbeOgzsXZIoiQanCBeHQp1WZvqwxwf9w4RS4OiaARa1PEaF2VYTdMT9TTjwTaXvXSH-aMI6ZoEDZaX41hSTwiBeSGGCT--M_YMPy6TtMbAjzFhZAWnyDusDDzDXnyH8bgx0Ez7GPbZclWq3t88IlPFsVbhxYbV7HWOGExV2z7NXi5WIFifOictMTtygJUo2PC6zyuCzJUiD6w2NePbYNYWD3iRl72MkjQvAF3h2mW-11Vwc6PuqCYVO4xCS58KrW1gcc_V82Aq6hm9oxkcvSUjnwzpKXo9pKYl8DjMOPE0UZaWYLCJOV2b7G9aXfi7APovS2SCqsbfSXHlS5QwAcO5PJrtk-Y-8Fw0p345ds9fNxjaLZyG-64LBfSCw0KQmKmQMgQOnFKlHPE0Fwo3yhAeAMNg3zPmzI6YARmX2B3RSIPgPCMYItdyUHeVS4EhSAY_o23nKlM97xJNAl2KW-AgUeJ6ymLs5WmBeKcVmPSlZtMGfKPIqiaWyYO3xR_l_aVKlvZ4sztzd-sRx5pD3cZuNO_j5RlS3sEXBBBt9cgyCL2ARLyG-fLuI5J02K4UHFIZNpOVzMHhLulkYPx0cYNpnkaYDoFf7t0Lp0WY9d9g_swdgaeAE5oGFzogRJeZrlM5z2OJaiV8xBbjHnazUwCHp0nh9OH664uPs0V7XJAtq_czb-PrSVFFyfX8imwPKq5smXEi2GsExi3sRD8VDS9ONHZ1kR9fCqU2a92oMJjYZ6UsueNjuhpaFLxW5sZmQKzPSi5VpvOO2FORseLYuFZENinPTiZ_v-LIfMnSyqJML4_yQrun59KOkpjLWCogjp5C765piuMCDcaSzvfDS8yUK4-SsFrt9tF7ZbfoqYBZtcQRtWRqC3p020uSeThxpm5pl95sV0ZSZU-EOIyQZLzUhTxc9YN5JzK73gnekJKFntOVPlP9fdUosb0Ozdz9qAT9xWJ7JW6vbi09k-EKheWKmpefiXg8hwc356ZmltRzOnfK9QlDMZPX8rat8kFzC-5P03kvbBvYx7mhixQzhz66MtUc6T0A14bOrcWmZonR1r5vD4B9973g-8MD98WVqBWpZA-4LcEwzh2la1u1wAGUf7-l7pV7lDS80YhJkdBkCn0vphdFmM7zMAA6O4uAJwSQoywMk1Lpy7YpacJaC-_xXhdfqWOt1hnbOXrpg5OPNfBUfEe4XgKG-pDw0sSndLgXaGwa_VozvfufwXDWkZlI65zBE07GKxH4eU1VCOcvl8miRtM5zfVyeCIuRcZzVkHdRwgGsDCLu_QQfZHNlhn1U4XEYiFKpH18ZPeOSo6e2aCcIR8mgyMnTewX3hMcafj85lnTjjhTbhxbv7QHgekHkk3AtlxrIh0SRThHSEUQyUxVD0RARBABAVSuuGczqhgnooUrG5nOWRMSLhMLy-VQtChB6k0B2x4hZ0MduqwQzibrGqSdR0KIGvl164lGLwyeaTz4yaOjaCbj5utHkSv52NtNV6FluIdtYw0y6nPqirwfwFh6g6022LaeRgeXzrF2joZ1rRIZcpdytKt2mo7C0QAN7Z0DxQyjlSXNAEln70bOcTSYSNeUPNtSY-4SIpfrbpcPH14d0PPI3uvhAu61ZCTAyKvuA7zGuD690g4_My5868pUDU__7TbPplqwu4lwuE20p8s7FPWVyR7eLcyXteiY085mH-m4ued6sBqKYb1zss6B1KuIXOT3d4RjVFhMFqrbjdDXYpGJ1oFGoqPOJoLsKA4krvHsdt0MD7JRIqKB-Ozp3lOmnwTJUKipMqB3TnXd24FL5GKCGQS4fGm2QZQ4-uWCk27ms1ZOU8mmPFBqKmHh7h0_N_rh0dZZRXFTyHpLv_q2O20RBkWTxS5RBJATsJDH3DENeCwn3o7LeYaadJIi9w6uVigWV6CRIoNkGgDB49pczAs3BH3XPgmIfZa3UIsN22tDWFC26HSObcROOZcJXpBZvEcB0ne0cx7oWQxJfBpDw2aH0jNhLrJWJgltVZUkFc6lmT1eE4tQ8Tw9z5KDmOnrfNTWo5uIsF9SwkIFHHiijXgz0XDl6ngcaLqCI5F-Z4hCUOMzLCGPRoFIt603y4bC7QniQSuQgSkQBVitIeV6uGMjV99QxVmEZk9kHH7Zs1etyJEuy8ObRnTyTmpxFiIbgXYf4AjS6Rg_Ep3MTOirl4lLMRyzyluUS575pWlId8CVnZAWsaCbzdHQkymH-zTWeOoNqO6RRcrFVTo6AX5vChCgXtapaQU8LfTyxhxBzDTraHWcux5dUvazFvlQyJJRyaKctocgA_qA1h4uQuSkzPtX2vYDUnb-klzZne-3iJLPVNJlWTeP4D6uow5Q1Pfv34C_W9aPb8BfzfPHfwGgon6h

<mxfile host="Electron" modified="2022-03-26T10:52:07.381Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/17.2.1 Chrome/96.0.4664.174 Electron/16.1.0 Safari/537.36" etag="c7rPkDjiJFuVDdgIdBCQ" version="17.2.1" type="device">
  <diagram id="is4nKnoC7knK3tbmEpOL" name="ページ1">
    <mxGraphModel dx="1102" dy="857" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <object placeholders="1" c4Name="Banking Customer" c4Type="Person" c4Description="A customer of the bank, &#xa;with personal bank accounts." label="&lt;font style=&quot;font-size: 16px&quot;&gt;&lt;b&gt;%c4Name%&lt;/b&gt;&lt;/font&gt;&lt;div&gt;[%c4Type%]&lt;/div&gt;&lt;br&gt;&lt;div&gt;&lt;font style=&quot;font-size: 11px&quot;&gt;&lt;font color=&quot;#cccccc&quot;&gt;%c4Description%&lt;/font&gt;&lt;/div&gt;" id="v1w6xJLIwrtz22bP0FQ9-1">
          <mxCell style="html=1;fontSize=11;dashed=0;whitespace=wrap;fillColor=#083F75;strokeColor=#06315C;fontColor=#ffffff;shape=mxgraph.c4.person2;align=center;metaEdit=1;points=[[0.5,0,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0]];resizable=0;" parent="1" vertex="1">
            <mxGeometry x="260" y="40" width="200" height="180" as="geometry" />
          </mxCell>
        </object>
        <mxCell id="v1w6xJLIwrtz22bP0FQ9-2" value="Legend" style="align=left;fontSize=16;fontStyle=1;strokeColor=none;fillColor=none;fontColor=#4D4D4D;spacingTop=-8;resizable=0;" parent="1" vertex="1">
          <mxGeometry x="40" y="10" width="180" height="30" as="geometry" />
        </mxCell>
        <mxCell id="v1w6xJLIwrtz22bP0FQ9-3" value="" style="shape=table;html=1;whiteSpace=wrap;startSize=0;container=1;collapsible=0;childLayout=tableLayout;fillColor=none;align=left;spacingLeft=10;strokeColor=none;rounded=1;arcSize=11;fontColor=#FFFFFF;resizable=0;points=[[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];" parent="1" vertex="1">
          <mxGeometry x="40" y="40" width="180" height="180" as="geometry" />
        </mxCell>
        <mxCell id="v1w6xJLIwrtz22bP0FQ9-4" value="Person" style="shape=partialRectangle;html=1;whiteSpace=wrap;connectable=0;fillColor=#1E4074;top=0;left=0;bottom=0;right=0;overflow=hidden;pointerEvents=1;align=left;spacingLeft=10;strokeColor=none;fontColor=#FFFFFF;" parent="v1w6xJLIwrtz22bP0FQ9-3" vertex="1">
          <mxGeometry width="180" height="30" as="geometry" />
        </mxCell>
        <mxCell id="v1w6xJLIwrtz22bP0FQ9-5" value="Software System" style="shape=partialRectangle;html=1;whiteSpace=wrap;connectable=0;fillColor=#3162AF;top=0;left=0;bottom=0;right=0;overflow=hidden;pointerEvents=1;align=left;spacingLeft=10;fontColor=#FFFFFF;" parent="v1w6xJLIwrtz22bP0FQ9-3" vertex="1">
          <mxGeometry y="30" width="180" height="30" as="geometry" />
        </mxCell>
        <mxCell id="v1w6xJLIwrtz22bP0FQ9-6" value="Container" style="shape=partialRectangle;html=1;whiteSpace=wrap;connectable=0;fillColor=#52A2D8;top=0;left=0;bottom=0;right=0;overflow=hidden;pointerEvents=1;align=left;spacingLeft=10;fontColor=#FFFFFF;" parent="v1w6xJLIwrtz22bP0FQ9-3" vertex="1">
          <mxGeometry y="60" width="180" height="30" as="geometry" />
        </mxCell>
        <mxCell id="v1w6xJLIwrtz22bP0FQ9-7" value="Component" style="shape=partialRectangle;html=1;whiteSpace=wrap;connectable=0;fillColor=#7CBEF1;top=0;left=0;bottom=0;right=0;overflow=hidden;pointerEvents=1;align=left;spacingLeft=10;fontColor=#FFFFFF;" parent="v1w6xJLIwrtz22bP0FQ9-3" vertex="1">
          <mxGeometry y="90" width="180" height="30" as="geometry" />
        </mxCell>
        <mxCell id="v1w6xJLIwrtz22bP0FQ9-8" value="External Person" style="shape=partialRectangle;html=1;whiteSpace=wrap;connectable=0;fillColor=#6B6477;top=0;left=0;bottom=0;right=0;overflow=hidden;pointerEvents=1;align=left;spacingLeft=10;fontColor=#FFFFFF;" parent="v1w6xJLIwrtz22bP0FQ9-3" vertex="1">
          <mxGeometry y="120" width="180" height="30" as="geometry" />
        </mxCell>
        <mxCell id="v1w6xJLIwrtz22bP0FQ9-9" value="External Software System" style="shape=partialRectangle;html=1;whiteSpace=wrap;connectable=0;fillColor=#8B8496;top=0;left=0;bottom=0;right=0;overflow=hidden;pointerEvents=1;align=left;spacingLeft=10;fontColor=#FFFFFF;" parent="v1w6xJLIwrtz22bP0FQ9-3" vertex="1">
          <mxGeometry y="150" width="180" height="30" as="geometry" />
        </mxCell>
        <object placeholders="1" c4Name="System name" c4Type="Software System" c4Description="Description of software system." label="&lt;font style=&quot;font-size: 16px&quot;&gt;&lt;b&gt;%c4Name%&lt;/b&gt;&lt;/font&gt;&lt;div&gt;[%c4Type%]&lt;/div&gt;&lt;br&gt;&lt;div&gt;&lt;font style=&quot;font-size: 11px&quot;&gt;&lt;font color=&quot;#cccccc&quot;&gt;%c4Description%&lt;/font&gt;&lt;/div&gt;" id="v1w6xJLIwrtz22bP0FQ9-13">
          <mxCell style="rounded=1;whiteSpace=wrap;html=1;labelBackgroundColor=none;fillColor=#1061B0;fontColor=#ffffff;align=center;arcSize=10;strokeColor=#0D5091;metaEdit=1;resizable=0;points=[[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];" parent="1" vertex="1">
            <mxGeometry x="40" y="280" width="240" height="120" as="geometry" />
          </mxCell>
        </object>
        <object placeholders="1" c4Name="External system name" c4Type="Software System" c4Description="The internal Microsoft&#xa;Exchange e-mail system." label="&lt;font style=&quot;font-size: 16px&quot;&gt;&lt;b&gt;%c4Name%&lt;/b&gt;&lt;/font&gt;&lt;div&gt;[%c4Type%]&lt;/div&gt;&lt;br&gt;&lt;div&gt;&lt;font style=&quot;font-size: 11px&quot;&gt;&lt;font color=&quot;#cccccc&quot;&gt;%c4Description%&lt;/font&gt;&lt;/div&gt;" id="v1w6xJLIwrtz22bP0FQ9-14">
          <mxCell style="rounded=1;whiteSpace=wrap;html=1;labelBackgroundColor=none;fillColor=#8C8496;fontColor=#ffffff;align=center;arcSize=10;strokeColor=#736782;metaEdit=1;resizable=0;points=[[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];" parent="1" vertex="1">
            <mxGeometry x="440" y="280" width="240" height="120" as="geometry" />
          </mxCell>
        </object>
        <object placeholders="1" c4Type="Relationship" c4Description="Uses" label="&lt;div style=&quot;text-align: left&quot;&gt;&lt;div style=&quot;text-align: center&quot;&gt;&lt;b&gt;%c4Description%&lt;/b&gt;&lt;/div&gt;" id="v1w6xJLIwrtz22bP0FQ9-15">
          <mxCell style="endArrow=blockThin;html=1;fontSize=10;fontColor=#404040;strokeWidth=1;endFill=1;strokeColor=#828282;elbow=vertical;metaEdit=1;endSize=14;startSize=14;jumpStyle=arc;jumpSize=16;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.75;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" source="v1w6xJLIwrtz22bP0FQ9-1" target="v1w6xJLIwrtz22bP0FQ9-13" edge="1">
            <mxGeometry width="240" relative="1" as="geometry">
              <mxPoint x="30" y="520" as="sourcePoint" />
              <mxPoint x="270" y="520" as="targetPoint" />
            </mxGeometry>
          </mxCell>
        </object>
        <object placeholders="1" c4Type="Relationship" c4Description="Sends e-mails to" label="&lt;div style=&quot;text-align: left&quot;&gt;&lt;div style=&quot;text-align: center&quot;&gt;&lt;b&gt;%c4Description%&lt;/b&gt;&lt;/div&gt;" id="v1w6xJLIwrtz22bP0FQ9-16">
          <mxCell style="endArrow=blockThin;html=1;fontSize=10;fontColor=#404040;strokeWidth=1;endFill=1;strokeColor=#828282;elbow=vertical;metaEdit=1;endSize=14;startSize=14;jumpStyle=arc;jumpSize=16;rounded=0;exitX=0.25;exitY=0;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" source="v1w6xJLIwrtz22bP0FQ9-14" target="v1w6xJLIwrtz22bP0FQ9-1" edge="1">
            <mxGeometry width="240" relative="1" as="geometry">
              <mxPoint x="310" y="230" as="sourcePoint" />
              <mxPoint x="300" y="220" as="targetPoint" />
            </mxGeometry>
          </mxCell>
        </object>
        <object placeholders="1" c4Name="Mainframe Banking&#xa;System" c4Type="Software System" c4Description="Stores all of the core banking&#xa;information." label="&lt;font style=&quot;font-size: 16px&quot;&gt;&lt;b&gt;%c4Name%&lt;/b&gt;&lt;/font&gt;&lt;div&gt;[%c4Type%]&lt;/div&gt;&lt;br&gt;&lt;div&gt;&lt;font style=&quot;font-size: 11px&quot;&gt;&lt;font color=&quot;#cccccc&quot;&gt;%c4Description%&lt;/font&gt;&lt;/div&gt;" id="v1w6xJLIwrtz22bP0FQ9-17">
          <mxCell style="rounded=1;whiteSpace=wrap;html=1;labelBackgroundColor=none;fillColor=#8C8496;fontColor=#ffffff;align=center;arcSize=10;strokeColor=#736782;metaEdit=1;resizable=0;points=[[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];" parent="1" vertex="1">
            <mxGeometry x="40" y="520" width="240" height="120" as="geometry" />
          </mxCell>
        </object>
        <object placeholders="1" c4Type="Relationship" c4Description="Uses" label="&lt;div style=&quot;text-align: left&quot;&gt;&lt;div style=&quot;text-align: center&quot;&gt;&lt;b&gt;%c4Description%&lt;/b&gt;&lt;/div&gt;" id="v1w6xJLIwrtz22bP0FQ9-18">
          <mxCell style="endArrow=blockThin;html=1;fontSize=10;fontColor=#404040;strokeWidth=1;endFill=1;strokeColor=#828282;elbow=vertical;metaEdit=1;endSize=14;startSize=14;jumpStyle=arc;jumpSize=16;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" source="v1w6xJLIwrtz22bP0FQ9-13" target="v1w6xJLIwrtz22bP0FQ9-17" edge="1">
            <mxGeometry width="240" relative="1" as="geometry">
              <mxPoint x="350" y="250" as="sourcePoint" />
              <mxPoint x="278" y="290" as="targetPoint" />
            </mxGeometry>
          </mxCell>
        </object>
        <object placeholders="1" c4Type="Relationship" c4Technology="SMTP" c4Description="Sends e-mails" label="&lt;div style=&quot;text-align: left&quot;&gt;&lt;div style=&quot;text-align: center&quot;&gt;&lt;b&gt;%c4Description%&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;text-align: center&quot;&gt;[%c4Technology%]&lt;/div&gt;&lt;/div&gt;" id="v1w6xJLIwrtz22bP0FQ9-19">
          <mxCell style="endArrow=blockThin;html=1;fontSize=10;fontColor=#404040;strokeWidth=1;endFill=1;strokeColor=#828282;elbow=vertical;metaEdit=1;endSize=14;startSize=14;jumpStyle=arc;jumpSize=16;rounded=0;edgeStyle=orthogonalEdgeStyle;exitX=1;exitY=0.5;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" source="v1w6xJLIwrtz22bP0FQ9-13" target="v1w6xJLIwrtz22bP0FQ9-14" edge="1">
            <mxGeometry width="240" relative="1" as="geometry">
              <mxPoint x="290" y="450" as="sourcePoint" />
              <mxPoint x="530" y="450" as="targetPoint" />
            </mxGeometry>
          </mxCell>
        </object>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

[amadeus-torwell]

Is it somehow configurable where the sidecar container runs (host & port)? The default for diagramsnet seems to be localhost:8005.

[ggrossetie]

This information is missing from the documentation but yes you can configure on which host/port the gateway/main server (yuzutech/kroki) will communicate with the companion/sidecar container:

https://github.com/yuzutech/kroki/blob/6e3496d28ecf127d11d7913d38973125fb23c024/server/src/main/java/io/kroki/server/service/Diagramsnet.java#L36-L37

https://docs.kroki.io/kroki/setup/configuration/#_companion_container_host_and_port

[pitwegner]

Seems like the svg document size is always 300x150px, which leads to the diagram not being rendered fully when kroki is referenced in the src attribute of an img-tag (e.g. <img src="https://kroki.example.org/diagramsnet/svg/eNo9WMeuLMtx3OsrDu6KQuvd9o56j8C099P...">). This is due to a missing viewBox. Maybe it can be calculated and added to the svg?

[tfboy]

I'd love to be able to integrate this into my internal Wiki.js with Kroki. I have pulled the docker image for diagramsnet and added it to my docker-compose.yml file (kroki is running on the same host, diagramsnet set up for port 8005).

$ docker ps
CONTAINER ID   IMAGE                        COMMAND                  CREATED          STATUS          PORTS                    NAMES
799e4a20fa6c   yuzutech/kroki               "/bin/sh -c 'exec ja…"   52 minutes ago   Up 52 minutes   0.0.0.0:8000->8000/tcp   docker_kroki_1
1648bfbbfa12   yuzutech/kroki-bpmn          "/usr/bin/bpmn"          52 minutes ago   Up 52 minutes   8003/tcp                 docker_bpmn_1
0b0b33d4102d   yuzutech/kroki-excalidraw    "/usr/bin/excalidraw"    52 minutes ago   Up 52 minutes   8004/tcp                 docker_excalidraw_1
98321117f7e1   yuzutech/kroki-mermaid       "node src/index.js"      52 minutes ago   Up 52 minutes   8002/tcp                 docker_mermaid_1
14a4179624a7   yuzutech/kroki-blockdiag     "gunicorn --preload …"   53 minutes ago   Up 53 minutes   8001/tcp                 docker_blockdiag_1
aa649db7f1a4   yuzutech/kroki-diagramsnet   "/usr/bin/diagramsnet"   53 minutes ago   Up 53 minutes   8005/tcp                 docker_diagramsnet_1

All the other types of diagrams work within my Wiki by calling up kroki. I can't understand what syntax / how to bring in a drawing so it's then rendered by kroki. Should it simply be (backticks not shown):

kroki
diagramsnet
{
<insert code here>
}

Are there some complete step-by-step instructions ?

[ggrossetie]

@tfboy I don't know the Kroki integration works on your Wiki so I can't really help. I would recommend to call Kroki directly using an HTTP client to make sure that your configuration is fine:

$ curl http://localhost:8000/diagramsnet/png/eNo1Vkeu7IYRvMrgrSSM9ZjJofT_BxiGw0wOM7ljzjlzad3CJ_HCt_kX8TMkbxuoQjVQXV3f2iMrm_RW9PPy_ePZpPEy9d3Hre2TMivT5PsHDMLwbyDyG4xbEPg7iPwOQZ8gBAcftzBPuy8Q9gnefnHLLun3-aZaNwj8BP-4fQ1w9I_bgaO_3qhhaFI3jaRyATCE-ETw2y8SbynyP25NWae3VxrX_a-3ZAr3z7IHIOIT_oRuTDH1bQqQ-Cf4ieI4-gkR6O3_CgEI__zScTPDLJzKv1k_bukS5t8_FHrEEuyBBkEgg1pmVaaOfty2dJrLvvv-8Rf_x205h_T7R5JuZZx-_PiWlGE-he2t_Fq6nNFO6nqGqDsJWaL2OWjyx60L2y_Azz__9fPP__z857-hjx9EsCwJLqCcEgOVCUQ7quXbeOgzsXZIoiQanCBeHQp1WZvqwxwf9w4RS4OiaARa1PEaF2VYTdMT9TTjwTaXvXSH-aMI6ZoEDZaX41hSTwiBeSGGCT--M_YMPy6TtMbAjzFhZAWnyDusDDzDXnyH8bgx0Ez7GPbZclWq3t88IlPFsVbhxYbV7HWOGExV2z7NXi5WIFifOictMTtygJUo2PC6zyuCzJUiD6w2NePbYNYWD3iRl72MkjQvAF3h2mW-11Vwc6PuqCYVO4xCS58KrW1gcc_V82Aq6hm9oxkcvSUjnwzpKXo9pKYl8DjMOPE0UZaWYLCJOV2b7G9aXfi7APovS2SCqsbfSXHlS5QwAcO5PJrtk-Y-8Fw0p345ds9fNxjaLZyG-64LBfSCw0KQmKmQMgQOnFKlHPE0Fwo3yhAeAMNg3zPmzI6YARmX2B3RSIPgPCMYItdyUHeVS4EhSAY_o23nKlM97xJNAl2KW-AgUeJ6ymLs5WmBeKcVmPSlZtMGfKPIqiaWyYO3xR_l_aVKlvZ4sztzd-sRx5pD3cZuNO_j5RlS3sEXBBBt9cgyCL2ARLyG-fLuI5J02K4UHFIZNpOVzMHhLulkYPx0cYNpnkaYDoFf7t0Lp0WY9d9g_swdgaeAE5oGFzogRJeZrlM5z2OJaiV8xBbjHnazUwCHp0nh9OH664uPs0V7XJAtq_czb-PrSVFFyfX8imwPKq5smXEi2GsExi3sRD8VDS9ONHZ1kR9fCqU2a92oMJjYZ6UsueNjuhpaFLxW5sZmQKzPSi5VpvOO2FORseLYuFZENinPTiZ_v-LIfMnSyqJML4_yQrun59KOkpjLWCogjp5C765piuMCDcaSzvfDS8yUK4-SsFrt9tF7ZbfoqYBZtcQRtWRqC3p020uSeThxpm5pl95sV0ZSZU-EOIyQZLzUhTxc9YN5JzK73gnekJKFntOVPlP9fdUosb0Ozdz9qAT9xWJ7JW6vbi09k-EKheWKmpefiXg8hwc356ZmltRzOnfK9QlDMZPX8rat8kFzC-5P03kvbBvYx7mhixQzhz66MtUc6T0A14bOrcWmZonR1r5vD4B9973g-8MD98WVqBWpZA-4LcEwzh2la1u1wAGUf7-l7pV7lDS80YhJkdBkCn0vphdFmM7zMAA6O4uAJwSQoywMk1Lpy7YpacJaC-_xXhdfqWOt1hnbOXrpg5OPNfBUfEe4XgKG-pDw0sSndLgXaGwa_VozvfufwXDWkZlI65zBE07GKxH4eU1VCOcvl8miRtM5zfVyeCIuRcZzVkHdRwgGsDCLu_QQfZHNlhn1U4XEYiFKpH18ZPeOSo6e2aCcIR8mgyMnTewX3hMcafj85lnTjjhTbhxbv7QHgekHkk3AtlxrIh0SRThHSEUQyUxVD0RARBABAVSuuGczqhgnooUrG5nOWRMSLhMLy-VQtChB6k0B2x4hZ0MduqwQzibrGqSdR0KIGvl164lGLwyeaTz4yaOjaCbj5utHkSv52NtNV6FluIdtYw0y6nPqirwfwFh6g6022LaeRgeXzrF2joZ1rRIZcpdytKt2mo7C0QAN7Z0DxQyjlSXNAEln70bOcTSYSNeUPNtSY-4SIpfrbpcPH14d0PPI3uvhAu61ZCTAyKvuA7zGuD690g4_My5868pUDU__7TbPplqwu4lwuE20p8s7FPWVyR7eLcyXteiY085mH-m4ued6sBqKYb1zss6B1KuIXOT3d4RjVFhMFqrbjdDXYpGJ1oFGoqPOJoLsKA4krvHsdt0MD7JRIqKB-Ozp3lOmnwTJUKipMqB3TnXd24FL5GKCGQS4fGm2QZQ4-uWCk27ms1ZOU8mmPFBqKmHh7h0_N_rh0dZZRXFTyHpLv_q2O20RBkWTxS5RBJATsJDH3DENeCwn3o7LeYaadJIi9w6uVigWV6CRIoNkGgDB49pczAs3BH3XPgmIfZa3UIsN22tDWFC26HSObcROOZcJXpBZvEcB0ne0cx7oWQxJfBpDw2aH0jNhLrJWJgltVZUkFc6lmT1eE4tQ8Tw9z5KDmOnrfNTWo5uIsF9SwkIFHHiijXgz0XDl6ngcaLqCI5F-Z4hCUOMzLCGPRoFIt603y4bC7QniQSuQgSkQBVitIeV6uGMjV99QxVmEZk9kHH7Zs1etyJEuy8ObRnTyTmpxFiIbgXYf4AjS6Rg_Ep3MTOirl4lLMRyzyluUS575pWlId8CVnZAWsaCbzdHQkymH-zTWeOoNqO6RRcrFVTo6AX5vChCgXtapaQU8LfTyxhxBzDTraHWcux5dUvazFvlQyJJRyaKctocgA_qA1h4uQuSkzPtX2vYDUnb-klzZne-3iJLPVNJlWTeP4D6uow5Q1Pfv34C_W9aPb8BfzfPHfwGgon6h

[tfboy]

@tfboy I don't know the Kroki integration works on your Wiki so I can't really help. I would recommend to call Kroki directly using an HTTP client to make sure that your configuration is fine:

$ curl http://localhost:8000/diagramsnet/png/eNo1Vkeu7IYRvMrgrSSM9ZjJofT_BxiGw0wOM7ljzjlzad3CJ_HCt_kX8TMkbxuoQjVQXV3f2iMrm_RW9PPy_ePZpPEy9d3Hre2TMivT5PsHDMLwbyDyG4xbEPg7iPwOQZ8gBAcftzBPuy8Q9gnefnHLLun3-aZaNwj8BP-4fQ1w9I_bgaO_3qhhaFI3jaRyATCE-ETw2y8SbynyP25NWae3VxrX_a-3ZAr3z7IHIOIT_oRuTDH1bQqQ-Cf4ieI4-gkR6O3_CgEI__zScTPDLJzKv1k_bukS5t8_FHrEEuyBBkEgg1pmVaaOfty2dJrLvvv-8Rf_x205h_T7R5JuZZx-_PiWlGE-he2t_Fq6nNFO6nqGqDsJWaL2OWjyx60L2y_Azz__9fPP__z857-hjx9EsCwJLqCcEgOVCUQ7quXbeOgzsXZIoiQanCBeHQp1WZvqwxwf9w4RS4OiaARa1PEaF2VYTdMT9TTjwTaXvXSH-aMI6ZoEDZaX41hSTwiBeSGGCT--M_YMPy6TtMbAjzFhZAWnyDusDDzDXnyH8bgx0Ez7GPbZclWq3t88IlPFsVbhxYbV7HWOGExV2z7NXi5WIFifOictMTtygJUo2PC6zyuCzJUiD6w2NePbYNYWD3iRl72MkjQvAF3h2mW-11Vwc6PuqCYVO4xCS58KrW1gcc_V82Aq6hm9oxkcvSUjnwzpKXo9pKYl8DjMOPE0UZaWYLCJOV2b7G9aXfi7APovS2SCqsbfSXHlS5QwAcO5PJrtk-Y-8Fw0p345ds9fNxjaLZyG-64LBfSCw0KQmKmQMgQOnFKlHPE0Fwo3yhAeAMNg3zPmzI6YARmX2B3RSIPgPCMYItdyUHeVS4EhSAY_o23nKlM97xJNAl2KW-AgUeJ6ymLs5WmBeKcVmPSlZtMGfKPIqiaWyYO3xR_l_aVKlvZ4sztzd-sRx5pD3cZuNO_j5RlS3sEXBBBt9cgyCL2ARLyG-fLuI5J02K4UHFIZNpOVzMHhLulkYPx0cYNpnkaYDoFf7t0Lp0WY9d9g_swdgaeAE5oGFzogRJeZrlM5z2OJaiV8xBbjHnazUwCHp0nh9OH664uPs0V7XJAtq_czb-PrSVFFyfX8imwPKq5smXEi2GsExi3sRD8VDS9ONHZ1kR9fCqU2a92oMJjYZ6UsueNjuhpaFLxW5sZmQKzPSi5VpvOO2FORseLYuFZENinPTiZ_v-LIfMnSyqJML4_yQrun59KOkpjLWCogjp5C765piuMCDcaSzvfDS8yUK4-SsFrt9tF7ZbfoqYBZtcQRtWRqC3p020uSeThxpm5pl95sV0ZSZU-EOIyQZLzUhTxc9YN5JzK73gnekJKFntOVPlP9fdUosb0Ozdz9qAT9xWJ7JW6vbi09k-EKheWKmpefiXg8hwc356ZmltRzOnfK9QlDMZPX8rat8kFzC-5P03kvbBvYx7mhixQzhz66MtUc6T0A14bOrcWmZonR1r5vD4B9973g-8MD98WVqBWpZA-4LcEwzh2la1u1wAGUf7-l7pV7lDS80YhJkdBkCn0vphdFmM7zMAA6O4uAJwSQoywMk1Lpy7YpacJaC-_xXhdfqWOt1hnbOXrpg5OPNfBUfEe4XgKG-pDw0sSndLgXaGwa_VozvfufwXDWkZlI65zBE07GKxH4eU1VCOcvl8miRtM5zfVyeCIuRcZzVkHdRwgGsDCLu_QQfZHNlhn1U4XEYiFKpH18ZPeOSo6e2aCcIR8mgyMnTewX3hMcafj85lnTjjhTbhxbv7QHgekHkk3AtlxrIh0SRThHSEUQyUxVD0RARBABAVSuuGczqhgnooUrG5nOWRMSLhMLy-VQtChB6k0B2x4hZ0MduqwQzibrGqSdR0KIGvl164lGLwyeaTz4yaOjaCbj5utHkSv52NtNV6FluIdtYw0y6nPqirwfwFh6g6022LaeRgeXzrF2joZ1rRIZcpdytKt2mo7C0QAN7Z0DxQyjlSXNAEln70bOcTSYSNeUPNtSY-4SIpfrbpcPH14d0PPI3uvhAu61ZCTAyKvuA7zGuD690g4_My5868pUDU__7TbPplqwu4lwuE20p8s7FPWVyR7eLcyXteiY085mH-m4ued6sBqKYb1zss6B1KuIXOT3d4RjVFhMFqrbjdDXYpGJ1oFGoqPOJoLsKA4krvHsdt0MD7JRIqKB-Ozp3lOmnwTJUKipMqB3TnXd24FL5GKCGQS4fGm2QZQ4-uWCk27ms1ZOU8mmPFBqKmHh7h0_N_rh0dZZRXFTyHpLv_q2O20RBkWTxS5RBJATsJDH3DENeCwn3o7LeYaadJIi9w6uVigWV6CRIoNkGgDB49pczAs3BH3XPgmIfZa3UIsN22tDWFC26HSObcROOZcJXpBZvEcB0ne0cx7oWQxJfBpDw2aH0jNhLrJWJgltVZUkFc6lmT1eE4tQ8Tw9z5KDmOnrfNTWo5uIsF9SwkIFHHiijXgz0XDl6ngcaLqCI5F-Z4hCUOMzLCGPRoFIt603y4bC7QniQSuQgSkQBVitIeV6uGMjV99QxVmEZk9kHH7Zs1etyJEuy8ObRnTyTmpxFiIbgXYf4AjS6Rg_Ep3MTOirl4lLMRyzyluUS575pWlId8CVnZAWsaCbzdHQkymH-zTWeOoNqO6RRcrFVTo6AX5vChCgXtapaQU8LfTyxhxBzDTraHWcux5dUvazFvlQyJJRyaKctocgA_qA1h4uQuSkzPtX2vYDUnb-klzZne-3iJLPVNJlWTeP4D6uow5Q1Pfv34C_W9aPb8BfzfPHfwGgon6h

Merci Guillaume ! I've managed to get the sample image loading now using markdown:

[](https://wikid:8000/diagramsnet/png/eNo1Vkeu7IYRvMrgrSSM9ZjJofT_BxiGw0wOM7ljzjlzad3CJ_HCt_kX8TMkbxuoQjVQXV3f2iMrm_RW9PPy_ePZpPEy9d3Hre2TMivT5PsHDMLwbyDyG4xbEPg7iPwOQZ8gBAcftzBPuy8Q9gnefnHLLun3-aZaNwj8BP-4fQ1w9I_bgaO_3qhhaFI3jaRyATCE-ETw2y8SbynyP25NWae3VxrX_a-3ZAr3z7IHIOIT_oRuTDH1bQqQ-Cf4ieI4-gkR6O3_CgEI__zScTPDLJzKv1k_bukS5t8_FHrEEuyBBkEgg1pmVaaOfty2dJrLvvv-8Rf_x205h_T7R5JuZZx-_PiWlGE-he2t_Fq6nNFO6nqGqDsJWaL2OWjyx60L2y_Azz__9fPP__z857-hjx9EsCwJLqCcEgOVCUQ7quXbeOgzsXZIoiQanCBeHQp1WZvqwxwf9w4RS4OiaARa1PEaF2VYTdMT9TTjwTaXvXSH-aMI6ZoEDZaX41hSTwiBeSGGCT--M_YMPy6TtMbAjzFhZAWnyDusDDzDXnyH8bgx0Ez7GPbZclWq3t88IlPFsVbhxYbV7HWOGExV2z7NXi5WIFifOictMTtygJUo2PC6zyuCzJUiD6w2NePbYNYWD3iRl72MkjQvAF3h2mW-11Vwc6PuqCYVO4xCS58KrW1gcc_V82Aq6hm9oxkcvSUjnwzpKXo9pKYl8DjMOPE0UZaWYLCJOV2b7G9aXfi7APovS2SCqsbfSXHlS5QwAcO5PJrtk-Y-8Fw0p345ds9fNxjaLZyG-64LBfSCw0KQmKmQMgQOnFKlHPE0Fwo3yhAeAMNg3zPmzI6YARmX2B3RSIPgPCMYItdyUHeVS4EhSAY_o23nKlM97xJNAl2KW-AgUeJ6ymLs5WmBeKcVmPSlZtMGfKPIqiaWyYO3xR_l_aVKlvZ4sztzd-sRx5pD3cZuNO_j5RlS3sEXBBBt9cgyCL2ARLyG-fLuI5J02K4UHFIZNpOVzMHhLulkYPx0cYNpnkaYDoFf7t0Lp0WY9d9g_swdgaeAE5oGFzogRJeZrlM5z2OJaiV8xBbjHnazUwCHp0nh9OH664uPs0V7XJAtq_czb-PrSVFFyfX8imwPKq5smXEi2GsExi3sRD8VDS9ONHZ1kR9fCqU2a92oMJjYZ6UsueNjuhpaFLxW5sZmQKzPSi5VpvOO2FORseLYuFZENinPTiZ_v-LIfMnSyqJML4_yQrun59KOkpjLWCogjp5C765piuMCDcaSzvfDS8yUK4-SsFrt9tF7ZbfoqYBZtcQRtWRqC3p020uSeThxpm5pl95sV0ZSZU-EOIyQZLzUhTxc9YN5JzK73gnekJKFntOVPlP9fdUosb0Ozdz9qAT9xWJ7JW6vbi09k-EKheWKmpefiXg8hwc356ZmltRzOnfK9QlDMZPX8rat8kFzC-5P03kvbBvYx7mhixQzhz66MtUc6T0A14bOrcWmZonR1r5vD4B9973g-8MD98WVqBWpZA-4LcEwzh2la1u1wAGUf7-l7pV7lDS80YhJkdBkCn0vphdFmM7zMAA6O4uAJwSQoywMk1Lpy7YpacJaC-_xXhdfqWOt1hnbOXrpg5OPNfBUfEe4XgKG-pDw0sSndLgXaGwa_VozvfufwXDWkZlI65zBE07GKxH4eU1VCOcvl8miRtM5zfVyeCIuRcZzVkHdRwgGsDCLu_QQfZHNlhn1U4XEYiFKpH18ZPeOSo6e2aCcIR8mgyMnTewX3hMcafj85lnTjjhTbhxbv7QHgekHkk3AtlxrIh0SRThHSEUQyUxVD0RARBABAVSuuGczqhgnooUrG5nOWRMSLhMLy-VQtChB6k0B2x4hZ0MduqwQzibrGqSdR0KIGvl164lGLwyeaTz4yaOjaCbj5utHkSv52NtNV6FluIdtYw0y6nPqirwfwFh6g6022LaeRgeXzrF2joZ1rRIZcpdytKt2mo7C0QAN7Z0DxQyjlSXNAEln70bOcTSYSNeUPNtSY-4SIpfrbpcPH14d0PPI3uvhAu61ZCTAyKvuA7zGuD690g4_My5868pUDU__7TbPplqwu4lwuE20p8s7FPWVyR7eLcyXteiY085mH-m4ued6sBqKYb1zss6B1KuIXOT3d4RjVFhMFqrbjdDXYpGJ1oFGoqPOJoLsKA4krvHsdt0MD7JRIqKB-Ozp3lOmnwTJUKipMqB3TnXd24FL5GKCGQS4fGm2QZQ4-uWCk27ms1ZOU8mmPFBqKmHh7h0_N_rh0dZZRXFTyHpLv_q2O20RBkWTxS5RBJATsJDH3DENeCwn3o7LeYaadJIi9w6uVigWV6CRIoNkGgDB49pczAs3BH3XPgmIfZa3UIsN22tDWFC26HSObcROOZcJXpBZvEcB0ne0cx7oWQxJfBpDw2aH0jNhLrJWJgltVZUkFc6lmT1eE4tQ8Tw9z5KDmOnrfNTWo5uIsF9SwkIFHHiijXgz0XDl6ngcaLqCI5F-Z4hCUOMzLCGPRoFIt603y4bC7QniQSuQgSkQBVitIeV6uGMjV99QxVmEZk9kHH7Zs1etyJEuy8ObRnTyTmpxFiIbgXYf4AjS6Rg_Ep3MTOirl4lLMRyzyluUS575pWlId8CVnZAWsaCbzdHQkymH-zTWeOoNqO6RRcrFVTo6AX5vChCgXtapaQU8LfTyxhxBzDTraHWcux5dUvazFvlQyJJRyaKctocgA_qA1h4uQuSkzPtX2vYDUnb-klzZne-3iJLPVNJlWTeP4D6uow5Q1Pfv34C_W9aPb8BfzfPHfwGgon6h)

Next question: what / how is that code (base64 hash?) generated ? I have some drawings that I've made on the public draw.io server, I have saved the XML file (and tried other formats) but none of the hashes seem to be in the correct format.

Edit: The "code" my drawings seem to produce is the same format as the one you posted earlier with the viewer. I can use the viewer url adding the 1#R as a prefix and it works for viewing them online.

However, the format for the "demo" pictures which work with Kroki is different. So I guess my question is what needs to be done to obtain this format? I can't find the "demo" source code online to see how it's translated or extracted.

[ggrossetie]

The encode process is described here: https://docs.kroki.io/kroki/setup/encode-diagram/

Feel free to join kroki.zulipchat.com if you have additional questions.

The issue tracker is the preferred channel for reporting verifiable bugs, regressions, and security vulnerabilities or for making formal change requests. Whereas the project chat is the preferred means of communication.

[ebousse]

Hi! Thanks, this works nicely! Regarding PNG export, is there any way/plan to choose a specific output width/height?

EDIT: I've started a discussion here https://kroki.zulipchat.com/#narrow/stream/232085-users/topic/Discussions.20.2F.20feature.20requests.20for.20diagrams.2Enet.20support

[isidroas]

Raised https://github.com/yuzutech/kroki/issues/1726