Draw.io Moving app.diagrams.net to embed.diagrams.net about grafana-flowcharting

[xyzmurali]

Editing the Flowcharts are making them blank when embedded and are not loading anymore

[rossonapoli]

I have the same situation. I've drawn a lot of diagrams, but I can't edit them.
Has anyone found a workaround?

The workaround is described above -

editing in draw.io. exporting it
as XML compressed and updating the code in grafana dashboard

[xyzmurali]

No solution yet. I am doing workaround by editing in draw.io. exporting it as XML compressed and updating the code in grafana dashboard. I started facing problem today. Morning it was working and in afternoon it stopped working

…

On Mon, 27 Mar 2023, 16:57 yung_sun_xxi, ***@***.***> wrote: @xyzmurali <https://github.com/xyzmurali> hi, I have the problem you described. Do you know the solution? I've been editing my charts for last several months and couple of days ago I faced this — Reply to this email directly, view it on GitHub <#395 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKXBHG5BNPVRBPV7Y4WL2H3W6F2R7ANCNFSM6AAAAAAVRWUGCU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[mikaello]

The XML produced by Draw.io only to delete "diagram" and "mxfile". Keep XML inside "mxGraphModel".

Do you mean on the XML source when edit ?

Yeah, it seems like the XML exported from app.diagrams.net is not properly interpreted by the flowchart plugin, two solutions when exporting the XML (pick one, both seems to be working):

• Compress the exported XML:
  

• Remove diagram and mxfile tags, so you are only left with the mxGraphModel tag:

    <?xml version="1.0" encoding="UTF-8"?>
  - <mxfile host="app.diagrams.net" modified="2023-05-09T11:14:45.777Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36 Edg/112.0.1722.71" etag="USpjgHSfe8jmwE7lYcwj" version="21.2.9">
  -    <diagram id="prtHgNgQTEPvFCAcTncT" name="Page-1">
        <mxGraphModel dx="861" dy="775" 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" />
            <mxCell id="q2LFHkWotryW9NSGOExx-1" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="1">
              <mxGeometry x="370" y="360" width="80" height="80" as="geometry" />
            </mxCell>
          </root>
        </mxGraphModel>
  -   </diagram>
  - </mxfile>

[rossonapoli]

@xyzmurali hi, I have the problem you described. Do you know the solution? I've been editing my charts for last several months and couple of days ago I faced this

[rossonapoli]

@xyzmurali thanks a lot! Works for me too

[github-ps1304]

same here - thought it was due to updating to Grafana version 9.4.7 - but problem exist even with version 9.3.8

[gunaseelan321]

We are also using different grafana versions 7 & 9.3.6, in both grafana we are facing issues in flowchart plugin. We can edit/draw the drawings in drawio but it was not replicated in grafana dashboard. How to fix this issue...!

[avtotropa]

I have the same situation. I've drawn a lot of diagrams, but I can't edit them.
Has anyone found a workaround?

[avtotropa]

I have the same situation. I've drawn a lot of diagrams, but I can't edit them.
Has anyone found a workaround?

The workaround is described above -

editing in draw.io. exporting it as XML compressed and updating the code in grafana dashboard

Yes, that's right. everything worked. Thank you.

[avtotropa]

The only thing is that mapping has been broken, but this is fixable.

[chim678]

If you use Docker in your projects, another workaround is possible. Just create a docker container with a previous version of Drawio and use the URL in your Flowcharting plugin. But still would be good to solve the problem on the source code level.

[pauljones0]

I'm assuming everyone is experiencing the same issue as me, where the output of draw.io is a block of unknown Base64 text. I ran my block in CyberChef Magic and found that it's a base64, deflated raw text, encoded for URL. Entering the text here should decode the OG diagram you had.
https://gchq.github.io/CyberChef/#recipe=From_Base64('A-Za-z0-9%2B/%3D',true,false)Raw_Inflate(0,0,'Adaptive',false,false)URL_Decode()

Edit:
Clicking "decode" at the bottom is does the exact same thing as above. The issue turns out to be that it formats the mxcell style tags (see ) that have the "image=" set, into image=data:image/,

The images can be decoded using:
https://gchq.github.io/CyberChef/#recipe=From_Base64('A-Za-z0-9%2B/%3D',true,false)Encode_text('ISO-8859-2%20Latin%202%20Central%20European%20(28592)')Render_Image('Raw')

Edit: It appears it just don't save the image you just made and instead drops the new "default" image.
It should be saving your new draw.io image, but it just ignores it instead. It is also possible that it attempts to save an invalid format, fails and defaults to the default image.

I have also noticed that this ALSO occurs after opening the draw.io, making no changes, then clicking save. The first button press after, will render the same issue.

If you open the draw.io diagram, make no changes then,exit, the XML formatting is still correct after button presses, but this appears above the graphic "Sending current data to draw.io editor", which implies somehow it still thinks the draw.io editor is open?

I would presume the issue would be here:

grafana-flowcharting/src/drawio_base.ts

Lines 101 to 110 in 66397b6

	static getXmlTemplate() {
	if (GFDrawio._xmlTemplate) {
	return GFDrawio._xmlTemplate;
	}
	const url = `${GFPlugin.getRootPath()}${GFCONSTANT.CONF_FILE_DEFAULTDIO}`;
	return GFDrawio.loadFile(url).then((txt) => {
	GFDrawio._xmlTemplate = txt;
	return txt;
	});
	}

If Draw.io returns no flowcharts, it returns the default one.

Edit April 10: I did more debugging. The issue seems to be due to changes in the flowchart_handling.ts file. It appears the flowchart.download variable isn't being set to true. Since it remains as false, the plugin just injects the default version. I haven't been able to debug and find the exact lines, but I hope this helps.

Edit April 11: I've narrowed it down to the isEncoded(data: string) and GFDrawio.decode(data) functions. For some reason, changes on inner functions like decode propagate up to set source and set the graph value to be empty. Especially value = GFDrawio.isEncoded(value) ? GFDrawio.decode(value) : value seems to be suspect

[Teofaness]

Editing the Flowcharts are making them blank when embedded and are not loading anymore

I have the same problem...

[brunozanon]

I have the same problem, when I save nothing appears.

[xkilian]

Saying you having the same problem can be achieved by giving a thumbs up to those indicating that this is an issue.
More constructive would be a pull request to the curent repo or to @teguhsatria892 repo with the fix and ultimately a fork that could be maintained by multiple people (or if the curent maintainer @algenty can open up edition to multiple people.).

[jeroenhubgit]

I also experience this problem. It cannot be updated from the grafana UI now. Would be great if it can be updated soon :).

I was struggling with the workaround how to get the xml updated. This is how it worked for me in dummy steps:

step 1: edit your diagram in grafana UI embed app.diagrams.net editor (it also works when editing in draw.io)
step 2: export as compressed XML and click save, to close the embed app.diagrams.net editor.
step 3: open the XML file which has been downloaded which will then open in your browser
step 4: copy the full XML file code from your browser (from <mxfile host="app.diagrams.net"..... until ) and paste this in the XML 'Source Content' block in the grafana FlowCharting UI.
step 5: save the grafana dashboard and refresh your browser to make it visible again in grafana

Hope it can help others :)

[neil-yen]

The XML produced by Draw.io only to delete "diagram" and "mxfile".
Keep XML inside "mxGraphModel".

[jeroenhubgit]

The XML produced by Draw.io only to delete "diagram" and "mxfile". Keep XML inside "mxGraphModel".

I don't understand, what do you mean?

[aelxdc]

The XML produced by Draw.io only to delete "diagram" and "mxfile". Keep XML inside "mxGraphModel".

Do you mean on the XML source when edit ?

[jeanduporte]

I have the same problem. I edited a lot of diagrams in draw.io and then insert it in the panel flowchart. Now I have to modify them sometimes so I did update it directly from the panel Flowchart using the draw.io editor but it doesn't work. Once I have modified my diagram I go back to the dashboard and there is a blank all over the diagram

This feature was very useful and I hope it will be fix. For now the solution for me was to copy the raw code from the flowchart, paste it in draw.io, make the update and then copy the code of the diagram to paste it in the flowchart panel.

[github-ps1304]

its getting worse - Grafana just announced:
Angular panel plugin
The selected panel plugin is using deprecated plugin APIs.

Read more on Angular deprecation
View plugin details

Flowchart is using Angular - so cloud based Dashboard will stop working soon - on-premise installations might be able to adjust it via a setting in the config file.