Viewing a .drawio file in an HTML document #3430

markNZed · 2023-03-15T10:37:36Z

markNZed
Mar 15, 2023

Hi, I'm using drawio in NextCloud to edit .drawio files and I would like to point to those files for display in a Reveal.js presentation. I do not need editing of the .drawio file in the Reveal.js HTML file. All I want to do is display the .drawio file (using javscript I assume) in the client and loading the .drawio file from a URL but after a lot of searching etc I cannot find a simple example of how to do this. There are people building huge stacks to convert .drawio to SVG/PNG/PDF etc but that seems like overkill. I can point to a .drawio file in Google Drive using a URL but I can't point to a .drawio file on any other service (e.g. Nextcloud server). This does not seem like an unrealistic expectation but maybe I am missing part of the story. Is the function of ONLY viewing a .drawio file not available because of some commercial arrangement with Google ? Is there an example of converting a served .drawio file into an image in a browser client? Thanks!

Answered by markNZed

Mar 15, 2023

In the end I used:

<html>
<head>
    <script type="text/javascript" src="https://www.draw.io/js/viewer.min.js"></script>
</head>
<body>
<!-- This works but is commented out
<div class="mxgraph" style="max-width:100%;border:1px solid transparent;" data-mxgraph="{&quot;highlight&quot;:&quot;#0000ff&quot;,&quot;nav&quot;:true,&quot;resize&quot;:true,&quot;toolbar&quot;:&quot;zoom layers lightbox&quot;,&quot;edit&quot;:&quot;_blank&quot;,&quot;xml&quot;:&quot;&lt;mxfile userAgent=\&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36\&quot; version=\&quot;8.6.5\&quot; editor=\&quot;www.draw.io\&quot;&gt;&lt;diagram id=\…

View full answer

markNZed · 2023-03-15T14:19:05Z

markNZed
Mar 15, 2023
Author

In the end I used:

<html>
<head>
    <script type="text/javascript" src="https://www.draw.io/js/viewer.min.js"></script>
</head>
<body>
<!-- This works but is commented out
<div class="mxgraph" style="max-width:100%;border:1px solid transparent;" data-mxgraph="{&quot;highlight&quot;:&quot;#0000ff&quot;,&quot;nav&quot;:true,&quot;resize&quot;:true,&quot;toolbar&quot;:&quot;zoom layers lightbox&quot;,&quot;edit&quot;:&quot;_blank&quot;,&quot;xml&quot;:&quot;&lt;mxfile userAgent=\&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36\&quot; version=\&quot;8.6.5\&quot; editor=\&quot;www.draw.io\&quot;&gt;&lt;diagram id=\&quot;8d8df455-cfe5-311a-13e6-259b44eb4504\&quot; name=\&quot;Page-1\&quot;&gt;jZM7c4MwDIB/jfdgU0rX0LQd2omhswsK9sVgzjEB+usrsM3jcrkrC9InybIeJiyrh3fDW/GlS1CEHsqBsFdCaURZir+JjJ5EcexIZWTp2Qpy+QseHjztZAnXnaPVWlnZ7mGhmwYKu2PcGN3v3c5a7bO2vII7kBdc3dNvWVrhaEqfV/4BshIhc5S8OMsPLy6V0V3j8xHKzvPnzDUPZ/lCr4KXut8gdiIsM1pbJ9VDBmpqbmibi3t7YF3ubaCx/wmgLuDGVQfhxonC0GNrAMVqEgMqcNCBfcINDMcyM0aOqWnABi9MtnXc4N2Rc/V2DB3vhbSQt7yY9B7XCp2ErRVq0eKPKS0MD0uNlgbiZoKuwZoRXULAk+95WMrY6/064SjMRWymm3jG/VJVy9FrY1HwvQ3qOsPZtnkp7PQH&lt;/diagram&gt;&lt;/mxfile&gt;&quot;}"></div>
-->

<div id="drawio-diagram"></div>

<script>
    (function () {
        // Escape HTML
        const chatMap = {
            "&": "&amp;",
            "'": "&#x27;",
            "`": "&#x60;",
            '"': "&quot;",
            "<": "&lt;",
            ">": "&gt;",
        };

        function replaceMatchedCharacters(match) {
            return chatMap[match];
        }

        function escapeHTML(string) {
            if (typeof string !== "string") return string;
            return string.replace(/[&'`"<>]/g, replaceMatchedCharacters);
        }

        // Draw.io converter
        function createMxGraphData(xml, idx = new Date().getTime()) {
            return {
                editable: false,
                highlight: "#0000ff",
                nav: false,
                toolbar: null,
                edit: null,
                resize: true,
                lightbox: "open",
                xml,
            };
        }

        async function drawioConverterAsync(xml, idx) {
            return new Promise((resolve) => {
                const mxGraphData = createMxGraphData(xml, idx);
                const json = JSON.stringify(mxGraphData);
                const mxGraphHTML = createMxGraphHTML(json);
                resolve(mxGraphHTML);
            });
        }

        function createMxGraphHTML(json) {
            return `<div class="mxgraph" style="max-width:100%;border:1px solid transparent;" data-mxgraph="${escapeHTML(json)}"></div>`;
        }

        // Load Draw.io file
        function loadDrawioFile(url) {
            fetch(url)
                .then((response) => {
                    return response.text();
                })
                .then((data) => {
                    return drawioConverterAsync(data);
                })
                .then((content) => {
                    const graphContainer = document.getElementById('drawio-diagram');
                    graphContainer.innerHTML = content;
                    window.GraphViewer.processElements();
                })
                .catch((err) => {
                    console.error("Error loading draw.io file:", err);
                });
        }

        // Initialize
        loadDrawioFile("images/test.drawio");
    })();
</script>


</body>
</html>

1 reply

menckend May 8, 2024

I modified let it also work with draw.io graphs that had been saved/exported as SVG. (They have "a copy of my diagram" -- the entire mxfile construct -- stuffed into the SVG element's "content" attribute as an HTML-escaped string.) This way, I can save all my draw.io diagrams as SVGs, which I can use directly as targets for image tags nine times out of ten, and when I want the draw.io viewer to render them for me I can use this script to render them (to toggle layers or other interactivity)... and I don't have to save my drawio diagrams in two different formats to support both use-cases.

<html>
<body>

<div id="drawio-diagram"></div>
<script src="assets/js/viewer-static.min.js"></script>

<script>
    (function () {
        //  Escape HTML
        const chatMap = {
            "&": "&amp;",
            "'": "&#x27;",
            "`": "&#x60;",
            '"': "&quot;",
            "<": "&lt;",
            ">": "&gt;",
        };
        function replaceMatchedCharacters(match) {
            return chatMap[match];
        }
        function escapeHTML(string) {
            if (typeof string !== "string") return string;
            return string.replace(/[&'`"<>]/g, replaceMatchedCharacters);
        }
        function createMxGraphData(xml, idx = new Date().getTime()) {
            return {
                "highlight": "#123456",
                "nav": true,
                "resize": true,
                "edit": "_blank",
                "editable": "true",
                "toolbar": "zoom lightbox layers",
                "toolbar-position": "bottom",
                "toolbar-nohide": true,
                "lightbox": false,
                zoom: "1",
                xml,
            };
        }
        async function drawioConverterAsync(xml, idx) {
            return new Promise((resolve) => {
                const mxGraphData = createMxGraphData(xml, idx); 
                const json = JSON.stringify(mxGraphData);
                const mxGraphHTML = createMxGraphHTML(json);
                resolve(mxGraphHTML);
            });
        }
        function createMxGraphHTML(json) {
            return `<div class="mxgraph" style="max-width:100%;border:1px solid transparent;" data-mxgraph="${escapeHTML(json)}"></div>`;
        }


        // Extra extraction steps for diagrams saved in SVG containers.
        function pullDrawioCopyFromSvg (inboundText){
            const xmlDoc = new DOMParser().parseFromString(inboundText, "text/xml");
            console.log('xmlDoc', xmlDoc);
            const svgElements = xmlDoc.getElementsByTagName("svg");
            if (svgElements !== null) return inboundText;
            const mxFileAttribute = svgElements[0].attributes.content.nodeValue;
            return mxFileAttribute;
        }


        // Load Draw.io file
        function loadDrawioFile(url) {
            fetch(url)
                .then((response) => { // Get the text from the file at the URL being imported
                    return response.text();
                })

                // Extra extraction steps for diagrams saved in SVG containers.
                .then((resolvedText) => {
                    return pullDrawioCopyFromSvg(resolvedText); 
                })

                .then((data) => {
                    return drawioConverterAsync(data);
                })
                .then((content) => {
                    const graphContainer = document.getElementById('drawio-diagram');
                    graphContainer.innerHTML = content;
                    window.GraphViewer.processElements();
                })
                .catch((err) => {
                    console.error("Error loading draw.io file:", err);
                });
        }
        // Initialize
        loadDrawioFile("{{include.drawiolink}}");
    })();
</script>

</body>
</html>

menckend · 2024-05-02T03:33:45Z

menckend
May 2, 2024

Great stuff! Really helped me out. I'm moving some of my content off of Confluence onto GitHub pages where I was planning to just host the diagrams as "editable" SVGs. I didn't realize until I was pretty far into it that any "custom actions/links" in my diagrams have to be rendered by client-side js and I was having a hard time finding documentation on how to properly feed a hosted file's data into viewer.min.js.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Viewing a .drawio file in an HTML document #3430

{{title}}

Replies: 2 comments 1 reply

{{title}}

{{title}}

{{title}}

Select a reply

Viewing a .drawio file in an HTML document #3430

markNZed Mar 15, 2023

Replies: 2 comments · 1 reply

markNZed Mar 15, 2023 Author

menckend May 8, 2024

menckend May 2, 2024

markNZed
Mar 15, 2023

Replies: 2 comments 1 reply

markNZed
Mar 15, 2023
Author

menckend
May 2, 2024