How do I configure the diagrams.net flowchart viewer?

559 Views Asked by At

I work in a single-sourcing environment called Madcap Flare to create HTML5 websites. My company wants to implement troubleshooting flowcharts/diagrams for our content. I am exploring options on how to do this and came across draw.io which is now diagrams.net. I've created the troubleshooting flowchart and added the links based on layers. I embedded the content in a test project and built the HTML. It shows up and is interactive but there are things I want to change about the viewer.

I found this link: https://www.diagrams.net/doc/faq/embed-html-options It says:

The configuration and data are stored in a JSON object in the data-mxgraph attribute. Use the following settings to configure the viewer. Then, it lists all the settings you can change.

Where do I change these settings? Do I need to write Javascript or do I put these settings in the data-mxgraph attribute or in the div? I've written Javascript before but I've never manipulated an object like this from a program using Javascript.

Here's what the embedded HTML looks like:

<body>
        <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 tags lightbox&quot;,&quot;edit&quot;:&quot;_blank&quot;,&quot;xml&quot;:&quot;&lt;mxfile host=\&quot;app.diagrams.net\&quot; modified=\&quot;2022-07-26T16:02:00.635Z\&quot; agent=\&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36\&quot; etag=\&quot;0koqE5imIxcj8dJMGUTt\&quot; version=\&quot;20.2.0\&quot; type=\&quot;device\&quot;&gt;&lt;diagram id=\&quot;i3saqz_jRTMr-nfFmL5d\&quot; name=\&quot;Page-1\&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;&quot;}">
        </div>
        <script type="text/javascript" src="https://viewer.diagrams.net/js/viewer-static.min.js">
        </script>
    </body>
0

There are 0 best solutions below