Drawio in HTML

English | 日本語

A VSCode extension that previews HTML files in place and lets you view and edit embedded Drawio diagrams inline. Edits are auto-saved back into the same HTML file, so one file holds both the document and its diagrams — no separate .drawio files to keep in sync.

Quick start

For now, just try telling your AI agent:

Embed a Draw.io diagram in this HTML

What it does

• Renders the HTML body (headings, paragraphs, tables, images) as a live preview
• Edit body text directly in the preview (headings, paragraphs, list items, table cells): click to rewrite, Ctrl+S to save back to the real HTML. Inline markup like links and bold is preserved
• Renders embedded Drawio diagrams inline at their original location
• On hover, each diagram shows 🔍 (fullscreen) and ✏️ (edit) icons
• Press ✏️ to open the official Drawio editor in a side tab
• Saving in the editor automatically updates the source HTML on disk
• Multiple diagrams per HTML file, each editable independently
• Automatically follows VSCode's dark / light theme
• Diagrams automatically rescale to the editor width

Edit demo

Resize demo (adapts to window width)

Requirements

• VSCode 1.85.0 or later
• Internet access only while editing (the preview itself runs offline)

Install

Search drawio-in-html in the Extensions side bar of VSCode, or:

code --install-extension Maku.drawio-in-html

How to embed a diagram in HTML

The extension recognizes two embed formats — both render the same diagram. The examples below all draw a minimal "A → B" two-node graph:

┌───┐      ┌───┐
│ A │ ───▶ │ B │
└───┘      └───┘

A. Simple form (script tag with id)

<script type="application/xml" id="hello">
<mxfile>
  <diagram name="hello" id="hello">
    <mxGraphModel>
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="A" value="A" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
          <mxGeometry x="40" y="40" width="80" height="40" as="geometry" />
        </mxCell>
        <mxCell id="B" value="B" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
          <mxGeometry x="200" y="40" width="80" height="40" as="geometry" />
        </mxCell>
        <mxCell id="AB" edge="1" parent="1" source="A" target="B" style="endArrow=classic;html=1;">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
</script>

• Plain HTML5 inline-data-block usage — browsers ignore it, so no side effects
• The id must be unique within the HTML file
• Body can be either <mxGraphModel>...</mxGraphModel> or <mxfile>...</mxfile>
• Easiest workflow: drop an empty <script> with an arbitrary id and start drawing from ✏️
• To render in a plain browser too, add a mount script that reads the same id — see developer docs (Japanese)

B. Drawio's official export form (mxgraph div)

<div class="mxgraph" data-mxgraph='{"xml":"<mxfile><diagram name=\"hello\" id=\"hello\"><mxGraphModel><root><mxCell id=\"0\"/><mxCell id=\"1\" parent=\"0\"/><mxCell id=\"A\" value=\"A\" style=\"rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;\" vertex=\"1\" parent=\"1\"><mxGeometry x=\"40\" y=\"40\" width=\"80\" height=\"40\" as=\"geometry\"/></mxCell><mxCell id=\"B\" value=\"B\" style=\"rounded=0;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;\" vertex=\"1\" parent=\"1\"><mxGeometry x=\"200\" y=\"40\" width=\"80\" height=\"40\" as=\"geometry\"/></mxCell><mxCell id=\"AB\" edge=\"1\" parent=\"1\" source=\"A\" target=\"B\" style=\"endArrow=classic;html=1;\"><mxGeometry relative=\"1\" as=\"geometry\"/></mxCell></root></mxGraphModel></diagram></mxfile>"}'></div>
<script src="https://viewer.diagrams.net/js/viewer-static.min.js"></script>

• This is exactly what Drawio's "Extras → Edit Diagram → Publish → HTML" (or "Embed → HTML") emits
• The XML lives as a JSON string inside the host div's data-mxgraph attribute (with " escaped as \")
• Renders in both a plain browser and this extension with no edits at all
• Identifier is the div's id attribute. If absent, the extension auto-assigns drawio-mxgraph-1, drawio-mxgraph-2, ... in document order
• Lets you take a Drawio-published HTML straight into VSCode for editing

Usage

Editing body text

• Hover a text element in the preview to see a faint outline; click to edit it in place.
• Typing updates the in-memory document immediately (the tab shows an unsaved dot); Ctrl+S writes it to disk.
• Inline markup inside a block (links, bold, ...) is preserved.
• Editable targets are the innermost text blocks (headings, paragraphs, list items, table cells, ...). Layout wrappers and elements containing diagrams/SVG are not editable inline — edit those in the source.

Make this preview the default for .html (optional)

If you always want this preview when you double-click an HTML file, add the following to your VSCode settings.json:

"workbench.editorAssociations": {
  "*.html": "drawioInHtml.editor"
}

Remove the entry to revert.

Theme

• The preview automatically follows VSCode's dark / light theme.
• If your HTML's <style> sets a background or text color explicitly, your styles win — the extension does not override them.

⚠️ Security note

This preview executes any JavaScript embedded in the HTML you open — this is necessary so that CDN libraries such as Mermaid can run inside the preview.

That means opening someone else's HTML, or HTML you found on the web, may execute its scripts and could:

• Make outbound requests to unknown sites
• Send personal data to third parties
• Hijack browser behavior (the kind of attack known as XSS)

To stay safe:

• Only open HTML you wrote yourself
• For untrusted HTML, inspect the source in a plain text editor before opening it in the preview

Think of this preview as having the same level of risk as opening the HTML directly in a browser. "Just a VSCode preview" does not imply extra safety.

For developers

Internal architecture, marker spec, and contribution notes are in README.dev.html (currently Japanese only). Open it with this extension to see an embedded Drawio architecture diagram in action.

License & credits

• The bundled viewer-static.min.js is from drawio (jgraph/drawio)
• Editing is powered by embed.diagrams.net inside an iframe
• Source code is MIT licensed — see LICENSE