kroki
kroki copied to clipboard
Add support for diagrams.net (draw.io)
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
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 usinghttp://
. It's interesting to note that Firefox 87 does load the diagram properly usingfile://
orhttp://
.
- Chrome 90+ does not load the diagram properly using
- 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.
Hi, is there any update on this proposal?
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.
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.
Seems like you got an answer there, did you have a look?
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.
There are a lot of demo diagrams available (see screenshot) - would that be helpful?
![Screenshot 2022-01-11 at 14 57 18](https://user-images.githubusercontent.com/13705404/148955980-ca88e152-e19c-4228-bc1f-d3085522152b.png)
@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!
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.
@Mogztter in case you haven't seen the FAQ and as reference: https://www.diagrams.net/doc/faq/svg-export-text-problems
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.
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.
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
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 π
Great feature! When kroki-diagramsnet is released, I want to use also it in gitlab!
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, 
with personal bank accounts." label="<font style="font-size: 16px"><b>%c4Name%</b></font><div>[%c4Type%]</div><br><div><font style="font-size: 11px"><font color="#cccccc">%c4Description%</font></div>" 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="<font style="font-size: 16px"><b>%c4Name%</b></font><div>[%c4Type%]</div><br><div><font style="font-size: 11px"><font color="#cccccc">%c4Description%</font></div>" 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
Exchange e-mail system." label="<font style="font-size: 16px"><b>%c4Name%</b></font><div>[%c4Type%]</div><br><div><font style="font-size: 11px"><font color="#cccccc">%c4Description%</font></div>" 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="<div style="text-align: left"><div style="text-align: center"><b>%c4Description%</b></div>" 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="<div style="text-align: left"><div style="text-align: center"><b>%c4Description%</b></div>" 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
System" c4Type="Software System" c4Description="Stores all of the core banking
information." label="<font style="font-size: 16px"><b>%c4Name%</b></font><div>[%c4Type%]</div><br><div><font style="font-size: 11px"><font color="#cccccc">%c4Description%</font></div>" 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="<div style="text-align: left"><div style="text-align: center"><b>%c4Description%</b></div>" 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="<div style="text-align: left"><div style="text-align: center"><b>%c4Description%</b></div><div style="text-align: center">[%c4Technology%]</div></div>" 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>
Is it somehow configurable where the sidecar container runs (host & port)? The default for diagramsnet seems to be localhost:8005.
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
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?
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 ?
@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 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.
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.
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
Raised https://github.com/yuzutech/kroki/issues/1726