Why doesn't an html diagram embedded in Markdown?

Question

I am writing a scientific paper in Marktext and I wish to embed the following html diagram into markdown (created in draw.io)

<!DOCTYPE html>
<html>
<head>
   <title>--updated</title>
<meta charset="utf-8"/>
</head>
<body>
   <div class="mxgraph" 
        style="max-width:100%;border:1px solid transparent;" 
        data-mxgraph="{&quot;highlight&quot;:&quot;#666666&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 host=\&quot;Electron\&quot; modified=\&quot;2020-04-15T13:27:33.398Z\&quot; agent=\&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/12.9.9 Chrome/80.0.3987.163 Electron/8.2.1 Safari/537.36\&quot; etag=\&quot;7Y_i_u__cC6k-86I6LFA\&quot; version=\&quot;12.9.9\&quot; type=\&quot;device\&quot;&gt;&lt;diagram id=\&quot;S9mogTuWuYmF0rAw_yv_\&quot; name=\&quot;Page-1\&quot;&gt;xZTJTsMwEIafJseiNG7acoS2wAUVVCEoF2TFQ2LkxJHjNilPj4MneysWCXGJPJ/tWf6Z2CGLuLhWNI1uJQPheC4rHLJ0PM+f++ZbgoMFhMwtCBVnFo0bsOHvgNBFuuMMss5BLaXQPO3CQCYJBLrDqFIy7x57laIbNaUhDMAmoGJIHznTkaVzb9bwG+BhVEUeT8/tTkyrw1hJFlEm8xYiK4cslJTaruJiAaLUrtLF3rs6sVsnpiDR37nwkI1e6FbNH/n2ef22ul+m6/UIveyp2GHBF5itPlQSKLlLGJRexg65zCOuYZPSoNzNTc8Ni3QscBv9gdJQnEx0XJdvxgZkDFodzBG84PmoGI6MN0M7bxowRRS1tK8YxZaHtedGFbNAYX4gkjcQaaARJOyinDZjBYJmGQ+6skDB9VNrvTVr98xHa1lW7lbGAQ0bBNhgQHtCmkTkTgXwVZuHgrcE9Y8IWjEFgmq+76ZxTGWMcCe5SbDu58Tr9pNMeo2y6eOt9gT3HZGeI7fnSFMVgh44+mx6Xfbv54AM5uDy33+WviZ/+LMYs3mtrKbNk09WHw==&lt;/diagram&gt;&lt;/mxfile&gt;&quot;}">
   </div>
<script type="text/javascript" src="https://app.diagrams.net/js/viewer.min.js">
</script>
</body>
</html>

However, I've looked for other methods on SO (such as this and this), and they have not worked. I would appreciate any solutions to this issue.

EDIT: When I try to put this in a HTML block in Marktext, I see the following:

style="max-width:100%;border:1px solid transparent;"
 data-mxgraph="{"highlight":"#666666","nav":true,"resize":true,"toolbar":"zoom layers lightbox","edit":"_blank","xml":"<mxfile host=\"Electron\" modified=\"2020-04-15T13:27:33.398Z\" agent=\"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/12.9.9 Chrome/80.0.3987.163 Electron/8.2.1 Safari/537.36\" etag=\"7Y_i_u__cC6k-86I6LFA\" version=\"12.9.9\" type=\"device\"><diagram id=\"S9mogTuWuYmF0rAw_yv_\" name=\"Page-1\">xZTJTsMwEIafJseiNG7acoS2wAUVVCEoF2TFQ2LkxJHjNilPj4MneysWCXGJPJ/tWf6Z2CGLuLhWNI1uJQPheC4rHLJ0PM+f++ZbgoMFhMwtCBVnFo0bsOHvgNBFuuMMss5BLaXQPO3CQCYJBLrDqFIy7x57laIbNaUhDMAmoGJIHznTkaVzb9bwG+BhVEUeT8/tTkyrw1hJFlEm8xYiK4cslJTaruJiAaLUrtLF3rs6sVsnpiDR37nwkI1e6FbNH/n2ef22ul+m6/UIveyp2GHBF5itPlQSKLlLGJRexg65zCOuYZPSoNzNTc8Ni3QscBv9gdJQnEx0XJdvxgZkDFodzBG84PmoGI6MN0M7bxowRRS1tK8YxZaHtedGFbNAYX4gkjcQaaARJOyinDZjBYJmGQ+6skDB9VNrvTVr98xHa1lW7lbGAQ0bBNhgQHtCmkTkTgXwVZuHgrcE9Y8IWjEFgmq+76ZxTGWMcCe5SbDu58Tr9pNMeo2y6eOt9gT3HZGeI7fnSFMVgh44+mx6Xfbv54AM5uDy33+WviZ/+LMYs3mtrKbNk09WHw==</diagram></mxfile>"}">

Which is just the raw html, with no diagram showing. (I didn't add the javascript into Marktext)

What exactly DOES happen? Does it just not show up? Do you see a blank space? An error message? ... — griffin, Apr 15 '20 at 14:06
@griffin To further clarify, I don't see the syntax highlighting that is shown in my question; just plain text — JS4137, Apr 15 '20 at 15:25

score 1 · Accepted Answer · answered Apr 15 '20 at 15:10

1

Here what you can do!

Export your image as as a URL first and copy that URL

Type this where you have to insert your image

!()[]    

![here name that image whatever you want](Here you have to paste that link that you copied)

for example:

![My image](https://https://app.diagrams.net?lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1)

answered Apr 15 '20 at 15:10

Fareed Khan

2,613
1
11
19

Thank you! This is the approach I went for at the end. – JS4137 Apr 15 '20 at 15:19

score 0 · Answer 2 · answered Apr 16 '20 at 14:47

You need to insert a document fragment rather than an entire document.

The DOCTYPE, html, head, and body tags can only occur once in a document. Generally, when the Markdown is rendered to HTML, the HTML will be placed (within the body tag) within a document which contains those tags. Therefore they should not be included within your Markdown. Simply include only items which belong within the body tag. Like this:

<div class="mxgraph" 
     style="max-width:100%;border:1px solid transparent;" 
     data-mxgraph="{&quot;highlight&quot;:&quot;#666666&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 host=\&quot;Electron\&quot; modified=\&quot;2020-04-15T13:27:33.398Z\&quot; agent=\&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/12.9.9 Chrome/80.0.3987.163 Electron/8.2.1 Safari/537.36\&quot; etag=\&quot;7Y_i_u__cC6k-86I6LFA\&quot; version=\&quot;12.9.9\&quot; type=\&quot;device\&quot;&gt;&lt;diagram id=\&quot;S9mogTuWuYmF0rAw_yv_\&quot; name=\&quot;Page-1\&quot;&gt;xZTJTsMwEIafJseiNG7acoS2wAUVVCEoF2TFQ2LkxJHjNilPj4MneysWCXGJPJ/tWf6Z2CGLuLhWNI1uJQPheC4rHLJ0PM+f++ZbgoMFhMwtCBVnFo0bsOHvgNBFuuMMss5BLaXQPO3CQCYJBLrDqFIy7x57laIbNaUhDMAmoGJIHznTkaVzb9bwG+BhVEUeT8/tTkyrw1hJFlEm8xYiK4cslJTaruJiAaLUrtLF3rs6sVsnpiDR37nwkI1e6FbNH/n2ef22ul+m6/UIveyp2GHBF5itPlQSKLlLGJRexg65zCOuYZPSoNzNTc8Ni3QscBv9gdJQnEx0XJdvxgZkDFodzBG84PmoGI6MN0M7bxowRRS1tK8YxZaHtedGFbNAYX4gkjcQaaARJOyinDZjBYJmGQ+6skDB9VNrvTVr98xHa1lW7lbGAQ0bBNhgQHtCmkTkTgXwVZuHgrcE9Y8IWjEFgmq+76ZxTGWMcCe5SbDu58Tr9pNMeo2y6eOt9gT3HZGeI7fnSFMVgh44+mx6Xfbv54AM5uDy33+WviZ/+LMYs3mtrKbNk09WHw==&lt;/diagram&gt;&lt;/mxfile&gt;&quot;}">
</div>
<script type="text/javascript" src="https://app.diagrams.net/js/viewer.min.js">
</script>

A word of caution. The above will not work on many sites for security reasons. You have included a script tag which will cause a third party script to run on the page. That is a common attack vector. Therefore, many sites (such a stack overflow) will strip out or disable any such tags. In that case, using an image of your diagram is a reasonable alternative as highlighted in another answer.

Why doesn't an html diagram embedded in Markdown?

2 Answers2