Add support for diagrams.net (draw.io) #405

ggrossetie · 2020-10-03T15:22:10Z

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

The text was updated successfully, but these errors were encountered:

ggrossetie · 2021-04-25T18:16:52Z

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 · 2021-08-12T09:41:58Z

Hi,
is there any update on this proposal?

ggrossetie · 2021-08-15T13:02:22Z

We are waiting for an upstream change to be able to integrate it cleanly: jgraph/drawio#1946

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

rdmueller · 2021-11-19T10:18:57Z

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 · 2022-01-10T19:12:22Z

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

ggrossetie · 2022-01-11T09:27:18Z

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 · 2022-01-11T13:58:08Z

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

shah · 2022-01-13T15:03:19Z

@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 · 2022-01-14T09:00:25Z

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 · 2022-01-14T09:30:01Z

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

ggrossetie · 2022-01-14T10:34:30Z

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 · 2022-02-08T12:39:15Z

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 · 2022-03-09T07:50:46Z

There is a command line tool to render drawio https://j2r2b.github.io/2019/08/06/drawio-cli.html
Also see asciidoctor/asciidoctor-diagram#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 · 2022-03-20T14:50:34Z

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 · 2022-03-21T08:30:48Z

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

arukiidou · 2022-03-26T13:12:47Z

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 · 2022-10-12T10:07:31Z

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

ggrossetie · 2022-10-12T19:44:29Z

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:

kroki/server/src/main/java/io/kroki/server/service/Diagramsnet.java

Lines 36 to 37 in 6e3496d

    
           this.host = config.getString("KROKI_DIAGRAMSNET_HOST", "127.0.0.1"); 
        
           this.port = config.getInteger("KROKI_DIAGRAMSNET_PORT", 8005);

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

pitwegner · 2022-11-16T15:45:39Z

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 · 2023-03-20T17:06:25Z

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 · 2023-03-20T17:48:06Z

@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 · 2023-03-21T10:01:08Z

@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 · 2023-03-21T10:23:30Z

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 · 2023-07-05T16:49:46Z

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 · 2024-03-19T11:54:09Z

Raised #1726

ggrossetie added 💡 proposal javascript 🍩 enhancement New feature or request labels Oct 3, 2020

ggrossetie added 📜 javascript Related to Javascript code and removed javascript labels Oct 26, 2020

tobru mentioned this issue Jan 4, 2021

Convert architecture from png to svg and include in documentation k8up-io/k8up#254

Merged

3 tasks

ggrossetie added the 🙃 upstream label Aug 15, 2021

borekb mentioned this issue Oct 20, 2021

Make URLs shorter via encrypted cloud storage? #964

Open

ggrossetie added a commit to ggrossetie/kroki that referenced this issue Feb 15, 2022

resolves yuzutech#405 add support for diagrams.net

2070cbe

ggrossetie added a commit to ggrossetie/kroki that referenced this issue Mar 13, 2022

ref yuzutech#405 initial work to add support for diagrams.net

1d382ca

ggrossetie added a commit that referenced this issue Mar 13, 2022

ref #405 initial work to add support for diagrams.net (#1145)

6548559

arukiidou mentioned this issue Mar 26, 2022

[diagrams.net] (draw.io) RC3- C4 [Person]figure theme was lost #1237

Closed

brettaufheber mentioned this issue Mar 26, 2022

Support for image/diagram rendering brettaufheber/asciidoc-with-gh-pages-action#1

Closed

brettaufheber mentioned this issue Jun 30, 2022

Support for image/diagram rendering brettaufheber/asciidoc-site-generator#3

Open

pitwegner mentioned this issue Nov 16, 2022

Enable Support for experimental diagrams.net in kroki AVATEAM-IT-SYSTEMHAUS/mkdocs-kroki-plugin#18

Closed

pitwegner mentioned this issue Nov 17, 2022

add proper svg viewbox #1390

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for diagrams.net (draw.io) #405

Add support for diagrams.net (draw.io) #405

ggrossetie commented Oct 3, 2020

ggrossetie commented Apr 25, 2021

fperk commented Aug 12, 2021

ggrossetie commented Aug 15, 2021

rdmueller commented Nov 19, 2021

amadeus-torwell commented Jan 10, 2022

ggrossetie commented Jan 11, 2022

amadeus-torwell commented Jan 11, 2022

shah commented Jan 13, 2022

ggrossetie commented Jan 14, 2022

rdmueller commented Jan 14, 2022

ggrossetie commented Jan 14, 2022 •

edited

Loading

amadeus-torwell commented Feb 8, 2022

HenriAtWork commented Mar 9, 2022

ggrossetie commented Mar 20, 2022

arukiidou commented Mar 21, 2022

arukiidou commented Mar 26, 2022 •

edited

Loading

amadeus-torwell commented Oct 12, 2022 •

edited

Loading

ggrossetie commented Oct 12, 2022

pitwegner commented Nov 16, 2022 •

edited

Loading

tfboy commented Mar 20, 2023

ggrossetie commented Mar 20, 2023

tfboy commented Mar 21, 2023 •

edited

Loading

ggrossetie commented Mar 21, 2023

ebousse commented Jul 5, 2023 •

edited

Loading

isidroas commented Mar 19, 2024

Add support for diagrams.net (draw.io) #405

Add support for diagrams.net (draw.io) #405

Comments

ggrossetie commented Oct 3, 2020

Input

Output

Runtime

Project

ggrossetie commented Apr 25, 2021

fperk commented Aug 12, 2021

ggrossetie commented Aug 15, 2021

rdmueller commented Nov 19, 2021

amadeus-torwell commented Jan 10, 2022

ggrossetie commented Jan 11, 2022

amadeus-torwell commented Jan 11, 2022

shah commented Jan 13, 2022

ggrossetie commented Jan 14, 2022

rdmueller commented Jan 14, 2022

ggrossetie commented Jan 14, 2022 • edited Loading

amadeus-torwell commented Feb 8, 2022

HenriAtWork commented Mar 9, 2022

ggrossetie commented Mar 20, 2022

arukiidou commented Mar 21, 2022

arukiidou commented Mar 26, 2022 • edited Loading

amadeus-torwell commented Oct 12, 2022 • edited Loading

ggrossetie commented Oct 12, 2022

pitwegner commented Nov 16, 2022 • edited Loading

tfboy commented Mar 20, 2023

ggrossetie commented Mar 20, 2023

tfboy commented Mar 21, 2023 • edited Loading

ggrossetie commented Mar 21, 2023

ebousse commented Jul 5, 2023 • edited Loading

isidroas commented Mar 19, 2024

ggrossetie commented Jan 14, 2022 •

edited

Loading

arukiidou commented Mar 26, 2022 •

edited

Loading

amadeus-torwell commented Oct 12, 2022 •

edited

Loading

pitwegner commented Nov 16, 2022 •

edited

Loading

tfboy commented Mar 21, 2023 •

edited

Loading

ebousse commented Jul 5, 2023 •

edited

Loading