draw.ioの公式Xアカウントは2026年7月9日、Visual Studio Code（VS Code）用の拡張機能「Draw.io Integration」に、図をインライン編集する機能が加わったと紹介した。Markdownファイルを「Markdown with Diagrams (Experimental)」で開くと、Markdownのプレビュー上にdraw.ioの編集画面を展開し、本文中の図をその位置で編集できる。

この機能は、本稿執筆時点ではプレリリース版で提供されている。手元の環境でプレリリース版へ切り替えたところ、バージョン1.9.260714020がインストールされ、「⁠Markdown with Diagrams (Experimental)」を選択できるようになった。リリース版の1.9.0では、この機能を利用できなかった。

Markdownのプレビュー上で図を編集

Markdownに埋め込んだ図のXMLをプレビューしてインライン編集する機能は、2026年3月20日に実装された。drawioフェンスコードブロックに保存したXMLに加え、特定のHTMLコメント（<!-- drawio:start -->/<!-- drawio:end -->）の間に埋め込んだXMLも図として編集できるようになる。

プレリリース版では、VS Code標準のテキストエディターでdrawioフェンスコードブロックを含むMarkdownファイルを開くと、コードブロックの上に「Edit Diagram」「⁠Preview」「⁠Inline Edit」「⁠Lock」のCodeLensが表示される。

「Edit Diagram」はdraw.ioエディターを、「⁠Preview」は図のプレビューを、それぞれ新しいタブで開く。手元の確認では、「⁠Edit Diagram」はロード中のままとなり編集までは確認できなかった一方、「⁠Preview」では図を表示できた。

「Inline Edit」を選択すると、Markdownをプレビューしながら図をインライン編集できるエディター「Markdown with Diagrams (Experimental)」が新しいタブで開く。なお、対象のMarkdownファイルを開き、コマンドパレットから「Reopen Editor With...」を実行して、このエディターを選ぶこともできる。

このエディター内の図を選択すると、その位置にdraw.ioの編集画面が読み込まれ、図を直接編集できるようになる。

手元の環境では、draw.ioの編集画面の初回読み込みは時間がかかったが、drawioのフェンスコードブロックに埋め込んだ図のラベル変更と図形の移動を確認できた。

図の変更内容は、元のMarkdownファイル内にあるdrawioフェンスコードブロックのXMLへ反映される。また、図を右クリックすると、draw.ioのコンテキストメニューも開けた。

このエディターの画面上部にある「+ Diagram」を押すと、空の図が挿入される。図をクリックしてdraw.ioの編集画面を読み込むと、テンプレートを選ぶダイアログが現れる。別の図ですでにdraw.ioの編集画面を読み込んでいる場合は、「⁠+ Diagram」を押すと、このダイアログが自動的に表示される。ここで作成した図は、Markdownに新たなdrawioフェンスコードブロックとして記述される。

このエディター内に表示される図の編集領域は、ドラッグで大きさを変更できる。横幅を変更すると、Markdown内のフェンスの開始行にdrawio width=644のように横幅が記録される。また、「⁠+ Diagram」で挿入した新しい図には、初期値としてdrawio width=800が付いた。

drawioフェンスは標準のMarkdown記法ではないため、Markdownを一般的なツールでHTMLへ変換するとコードブロックとして出力される。手元では、VS Code標準のMarkdownプレビューでもXMLがコードブロックのまま表示された。ほかの環境でも図として表示するには、次に扱う画像リンク方式を使うか、変換処理側でdrawioフェンスに対応する必要がある。

リンクしたSVG／PNGもインライン編集

2026年6月25日には、Markdown内にXMLを埋め込んだ図に加え、画像リンクで参照する.drawio.svg／.drawio.pngファイルも「Markdown with Diagrams (Experimental)」のプレビュー上で編集できるようになった。Markdown上の記述は、次のような通常の画像リンクになる。

![Draw.ioを使った作図例](./diagram-test.drawio.svg)

このリンク方式なら、拡張機能を利用できない環境でも図を通常の画像として表示できる。ただし、図と文章は別ファイルとして管理することになる。

インライン編集の対象になるのは、画像リンクを1行に単独で記述し、リンク先の.drawio.svgまたは.drawio.pngがMarkdownファイルと同じワークスペースフォルダー内にある場合に限られる。

リンクした図をMarkdownのプレビュー上で編集するには、対象のMarkdownファイルを開き、コマンドパレットから「Reopen Editor With...」を実行して、「⁠Markdown with Diagrams (Experimental)」を選択する。なお、通常のMarkdown編集画面上で画像のパスにマウスオーバーすると図をプレビューできるが、そこからインライン編集には切り替えられなかった。

また、.drawio.svgや.drawio.png形式の画像ファイルをVS Codeで直接開くと、インライン編集にはならず、これまでと同じくdraw.ioエディターが別タブに表示され、図を単独で編集できる。

AI作図ワークフローの一部としても紹介

draw.ioは5カ月にわたるAI関連開発をまとめた投稿で、Mermaidによる図の生成や自動レイアウト、MCPサーバーと並べて、VS Codeでのインライン編集をAI作図ワークフローの要素として挙げている。

このうちMermaidについては、6月18日の投稿で、draw.ioのネイティブ図形として生成できる図を19種類増やし、対応数を計28種類に拡大したと発表した。生成後は、図形やコネクター、ラベル、スタイルをdraw.io上で編集できる。また、Mermaidのソースを編集して図を再生成できる。同投稿ではこのほか、エッジルーティングに対応したELKによるフロー／ツリーレイアウト、ステップ単位のアニメーション、カスタムアクション、図のJSONエクスポートの追加にも触れている。

MCPサーバーやClaude Code向けの「Draw.io Skill」については、以前の記事「draw.io、Claude Code向けスキルを公開」で紹介している。