Draw.io diagrams and HTML Export
Asked by Luke Smith:

I've just HTML exported a space that contains a lot of draw.io diagrams but they are not being displayed when I view the HTML. They are there as attachments on each page but they are not displayed inline when viewing the files in Chrome (or Safari). I notice there are errors in the console for every diagram:

Uncaught ReferenceError: require is not defined for every script block, such as (redacted):

\<script class="ap-iframe-body-script"\>  
(function(){  
var data = {  
"addon_key":"com.mxgraph.confluence.plugins.diagramly",  
"uniqueKey":"com.mxgraph.confluence.plugins.diagramly__drawioXXXX",  
"key":"drawio",  
"moduleType":"dynamicContentMacros", "moduleLocation":"content", "cp":"/wiki",  
"general":"",  
"w":"",  
"h":"",  
"url":"<https://confluence.draw.io/connect/confluence/viewer-1-4-8.html?XXXXX>",  
"structuredContext": "{\\"license\\":{\\"active\\":true},\\"confluence\\":{\\"macro\\":{\\"outputType\\":\\"html_export\\",\\"hash\\":\\"XXXX\\",\\"id\\":\\"XXXX\\"},\\"content\\":{\\"type\\":\\"page\\",\\"version\\":\\"XXXX\\",\\"id\\":\\"XXXX\\"},\\"space\\":{\\"key\\":\\"XXXX\\",\\"id\\":\\"XXXX\\"}}}",  
"contentClassifier":"content",  
"productCtx":"{\\"page.id\\":\\"XXXX\\",\\"macro.hash\\":\\"XXXX\\",\\"page.type\\":\\"page\\",\\"contentId\\":\\"XXXX\\",\\"simple\\":\\"0\\",\\"inComment\\":\\"0\\",\\": = \| RAW \| = :\\":\\"contentId=XXXX\|simple=0\|zoom=1\|inComment=0\|pageId=XXXX\|diagramDisplayName=XXXX.drawio\|lbox=1\|contentVer=1\|revision=1\|baseUrl=XXXX\\",\\"space.id\\":\\"XXXX\\",\\"diagramDisplayName\\":\\"XXXX\\",\\"diagramName\\":\\"XXXX.drawio\\",\\"links\\":\\"\\",\\"tbstyle\\":\\"\\",\\"height\\":\\"341\\",\\"space.key\\":\\"XXXX\\",\\"user.id\\":\\"XXXX\\",\\"content.version\\":\\"XXXX\\",\\"page.title\\":\\"XXXX\\",\\"zoom\\":\\"1\\",\\"macro.body\\":\\"\\",\\"pageId\\":\\"XXXX\\",\\"macro.truncated\\":\\"false\\",\\"lbox\\":\\"1\\",\\"content.type\\":\\"page\\",\\"output.type\\":\\"html_export\\",\\"contentVer\\":\\"1\\",\\"page.version\\":\\"XXXX\\",\\"revision\\":\\"XXXX\\",\\"user.key\\":\\"XXXX\\",\\"baseUrl\\":\\"XXXX\\",\\"content.id\\":\\"XXXX\\",\\"width\\":\\"XXXX\\",\\"macro.id\\":\\"XXXX\\"}",  
"timeZone":"XXXX",  
"origin":"<https://confluence.draw.io>",  
"hostOrigin":"XXXX",  
"apiMigrations": {  
"gdpr": true  
}  
};  
if(window.AP \&\& window.AP.subCreate) {  
window._AP.appendConnectAddon(data);  
} else {  
require(\['ac/create'\], function(create){  
create.appendConnectAddon(data);  
});  
}  
}());  
\</script\>

The error is on this line: require(\['ac/create'\], function(create){

Are draw.io diagrams supported in HTML exports? If so, any idea how I can get them working?


Answers:
author: Martin Seibert
body: Thanks for your answer. Unfortunately an HTML export from Confluence does not preserve macros in a way that would allow us easily to inject our draw.io diagrams in the exported HTML page. This is why you cannot export HTML content and have an included draw.io diagram automatically.

Suggestion for a workaround: You will find a PNG of your diagram as an attachment of the page. You could inject this image in the HTML export. Or you could (temporarily) replace the real diagram with the picture and start the export then. After the export you can revert to the version with the real diagram. I admit that this is not a cool workaround.

If you want, you can describe the context of your question. Why do you want to export to HTML at all. Maybe there are other alternatives.

comments: author: Pascal Buholzer
body: Would be nice, if this PNG replacement could happen automatically. We have really many diagrams and manual replacement is not an option.


Tags: cloud

confluence-cloud