Embedding Diagram as HTML distorts layout

[Maximilian Bayer]

Dear Community,

I am fairly new to draw.io but am impressed by its potential. Nevertheless I am having trouble implementing my first flow chart. I did design the chart using the online version and google drive. Then I selected file->embed-> html and copied the html code and the end tag. I am creating a wordpress website using the visual composer plugin. The respective shortcode for pure html inputs did work perfect with smaller test diagrams, but when implementing my flowchart the graphics display but are getting distorted. (text is moving outside its frames, icons are not aligned where they should be). I attached two screenshots showing how the diagramm shows in the online draw.io design surface and once implemented in my wordpress website. Please let me know if you have an idea what could cause this issue and how I could work around it. Any input would be highly appreciated. 

My wordpress setup is the following below in case you need this as an input:

WordPress 4.6.1

TheKen Child 3.4.1

TheKen 3.6

Visual Composer 4.12

Please let me know if you need further input. 

Best regards and thank you for your support,

Max 

[David Benson]

Have you tried https://en-gb.wordpress.org/plugins/drawit/ out of interest?

[Maximilian Bayer]

Yes, I did download the plugin ( https://en-gb.wordpress.org/plugins/drawit/) and tried to implement the chart. It does work in combination with different shortcodes of the theme that implement a texteditor. Within the texteditor i have a draw.io button that lets me implement the chart. The good thing is it shows completely undistorted and well, but the bad thing is it does seem to get implemented as image and not as html text. I cannot highlight text or implement any links. 

The theme also features a shortcode that allows to implement unfiltered html. if I incorporate the chart via the html shortcode I do get the distorted look which is my initial problem. text is highlight- and clickable but displays distorted and also bogs down the pageload a lot.

[David Benson]

Have a look with the browser debugger and check if there's any CSS in the computed style of the affected element that is being taken from the Wordpress page.

On Tuesday, 22 November 2016 11:11:32 UTC, Maximilian Bayer wrote:

[Maximilian Bayer]

Hi David, 

thank you for your feedback. I am sorry, but I am not completely sure If I understand completely what you are asking me since I am not too good with html and css. Did you ask me if when inspecting the computed element on the site and then looking at the CSS, if I can find any html parts in there (which do not belong there as it should be css only)?  In this case it seems this is the case, when checking the css on the computed element I find the html below 

 html|* > svg {

1. transform-origin: 50% 50% 0px;

}

user agent stylesheet

svg:not(:root), symbol, image, marker, pattern,foreignObject {

1. overflow: hidden;

}

user agent stylesheet

* {

1. transform-origin: 0px 0px 0px;

}

How could I fix this? Also this is me using the draw.io main website then exporting the chart as .html file and then copying the .html into a shortcode of my theme that can implement unfiltered .html. As a result the site loads incredibly slow, so I am not sure this is the right approach. Since you mentioned the draw.io plugin for wordpress which I am using. Is there any way I can implement Charts in a dynamic way with this plugin(text can me marked, links can be added to symbols)? I have the feeling results would be better when working with the plugin. 

Thank you for your support.

[Gaudenz Alder]

Have you tried embedding it as static SVG? Static SVG loads fast, while enabling text selection and links. (For IE9-11 you'll have to disable word wrapping and formatted labels though.)

[Maximilian Bayer]

Hi Gaudenz, thank you for your response, really appreciate it. I did try including the chart as SVG using the draw.io wordpres plugin as you can see in the screenshot. (switch from filetype from png to svg and hit save) As a result I do get a static image that does not seem to feature the element clickable where I placed the link for test reasons. Am I doing it wrong or does this not work with the plugin as far as you know.

Thank you for your support, 

best regards,

Max 

[Gaudenz Alder]

You're right, if the SVG is inside an img tag, the links are ignored. The plugin would have to put an svg element in the page to make this work (this can be seen in the webapp via File, Embed, SVG and ticking "Image"/unticking "Lightbox").

[Gaudenz Alder]

PS: Haven't tested it, but it might be possible to paste the SVG from the Embed dialog into the text view of the page as shown here for the HTML case https://www.youtube.com/watch?v=5Trc9hk3lQk Keep in mind that IE9-11 do not support foreignObjects, so disable word wrap and formatted text on all text elements if support for those browsers is required. IE8 and earlier do not support SVG at all, so for those you'll have to use the HTML embed code as shown in the above video (see https://desk.draw.io/solution/articles/16000042487-why-does-the-text-of-svg-export-sometimes-not-display-correctly-in-ie-and-some-svg-editors-).

[Maximilian Bayer]

Hi Alder,

thank you for your support. I tried implementing using the webapp via File, Embed, SVG and ticking "Image"/unticking "Lightbox". This works in the same way, so the display is good and undistorted but its implemented as an image and cannot be used with a link behind the element, cannot be clicked. I guess there is no other way to do it right?

When using export html in combination with drop into a textposting in wordpress it is html text and clickable but the design distorts. I guess I can do so without using any text formats as you say. One last question on the links though, if I lets say implement the link "http://www.testlink.com" in a chartelement, when clicking the link gets opened in "www.mydomain/www.testlink.com" and not in "www.testlink.com". Do you know what I am doing wrong here?

Best regards,

Max

[Gaudenz Alder]

Untick image and lightbox https://gyazo.com/11d1f9e223c9d977b9b410695465f26c

[Maximilian Bayer]

In that case unfortunately the chart does not show. I just get text snippets and the message [Not supported by viewer]. (screenshot)

I did try this on up to date versions of chrome and firefox. 

Thank you for your patience and support.

Am Freitag, 2. Dezember 2016 17:05:54 UTC+1 schrieb Gaudenz Alder:

[Gaudenz Alder]

Did you make sure to paste the SVG in text mode (see video) and disable word wrap and formatting on all labels?

[Gaudenz Alder]

Here is an example: https://www.youtube.com/watch?v=AP0xHUWl6ww

[Maximilian Bayer]

Hi Gaudenz,

I am sorry to pick this topic up again, but since I started working with the draw.io flowcharts again I was wondering if there are any additional things I could try.  When embedding the document suggested in the youtube video (no text format, no word wrap, svg, paste in text mode) the diagram does not get rendered but rather shown as pure codes. (see screenshot)

So far the best and only solution i found was using the wordpress plugin and saving the diagrams created within the plugin as svg file. This made the diagram display well but I could not highlight /select text since it was embedded like a picture als I could not embed clickable links.

Please let me know if there is any other workaround we did not try yet.

Thank you for your patient support, best regards,

Max

[Gaudenz Alder]

I've used a standard, default WordPress instance in my video, so if that doesn't work you probably have SVG disabled in your instance.