Draw.io Scientific Illustrator MCP: Live Canvas Drawing for an AI Coding Agent

What is Draw.io Scientific Illustrator?

It is a Codex plugin that lets an AI agent draw scientific figures live inside the visible draw.io desktop canvas. You watch shapes, labels, arrows, styling and layout appear step by step while the agent works.

The live workflow calls draw.io's own graph API through a localhost-only MCP server. It does not automate the operating-system mouse or keyboard, and it does not create XML first and open the file afterward.

What changes in your agent's output

• Figures are built from editable draw.io primitives, so labels, arrows, panels and legends stay editable.
• The agent draws with pacing, for example a 100 ms delay between steps, and checks each section with a screenshot of the draw.io renderer.
• The .drawio file is saved only after the drawing exists on the visible canvas, then validated and exported as PNG, SVG, PDF or JPG.
• A PNG, JPEG, SVG or a rendered PDF page can serve as the reference figure.

How the setup works

1. Install draw.io desktop and Git, and use the Codex desktop app or Codex CLI with plugin support.
2. Clone the repository, register it as a Codex marketplace and add the plugin.
3. Restart Codex, start a new task and attach the reference figure.
4. Mention Draw.io Scientific Illustrator and state the pacing and output formats you want.

Who Draw.io Scientific Illustrator is for

Best for

• Redrawing a reference scientific figure as editable draw.io shapes.
• Watching each shape appear on the visible canvas instead of opening a finished file.

Not for

• New projects. Development moved to scientific-illustrator, and this repository no longer receives feature or compatibility updates.
• Dense microscopy images, photographs, heatmaps or complex plots, which may need a future live image insertion operation.
• Drawing architecture diagrams with real vendor icons on a separate canvas app, which is the job Excalidraw Icons MCP covers with its own tools.
• Drawing new UI screens directly on a Figma canvas with JavaScript instead of scientific figures, work that Figma UI MCP takes on instead.
• Running a separate local design editor application next to your canvas instead of draw.io, a role that Figmaboy MCP fills on its own.
• Composing a single visual poster or art piece from scratch rather than redrawing a labeled figure, a task the canvas-design skill takes on.

Requirements and platform

• Codex desktop app or Codex CLI with plugin support, draw.io desktop and Git.
• Node.js, with version 22 or newer recommended, when the MCP servers run outside the bundled Codex runtime.
• Windows was the tested platform for v1.0.0, and macOS and Linux support is best effort.

Connect Draw.io Scientific Illustrator MCP: Live Canvas Drawing for an AI Coding Agent to your AI client

git clone https://github.com/icebird1998/drawio-scientific-illustrator.git
cd drawio-scientific-illustrator
codex plugin marketplace add "$(pwd)"
codex plugin add drawio-scientific-illustrator@drawio-scientific-tools

1. Check the requirements

   Install draw.io desktop and Git. Use the Codex desktop app or Codex CLI with plugin support, plus Node.js 22 or newer if the MCP servers run outside the bundled Codex runtime.

2. Install the plugin

   Run the commands above. On PowerShell, replace "$(pwd)" with (Get-Location).Path.

3. Or use an installer script

   The repository includes install.ps1 for Windows and install.sh for macOS and Linux. Review the script before running it.

4. Restart Codex

   Restart Codex and start a new task so the new skill and MCP tools load.

5. Point to a custom draw.io

   The plugin auto-detects common draw.io locations on Windows, macOS and Linux. For a custom installation, set DRAWIO_PATH to the executable before starting Codex.

Endpoints and ports

What you can do with it

• Live canvas controlEdits the active graph model of the visible draw.io desktop editor in real time.
• Paced drawingdrawio_live_draw_sequence builds content step by step, and the example prompt uses a 100 ms delay.
• Screenshot reviewdrawio_live_screenshot inspects the renderer after each logical section so labels, styles, positions and sizes can be corrected.
• Save after drawingdrawio_live_save_snapshot writes the .drawio file only from the graph already drawn on the canvas.
• Validate and exportdrawio_validate checks saved documents and drawio_export produces PNG, SVG, PDF or JPG files.
• Localhost onlyThe debugging endpoint binds to 127.0.0.1, and target discovery accepts only pages identified as draw.io or diagrams.net.
• No telemetryNo telemetry or hosted backend is included in the plugin.
• Three settingsDRAWIO_PATH, DRAWIO_LIVE_PORT and DRAWIO_LIVE_PROFILE set the executable, the debugging port and the profile directory.

Tools it exposes

Frequently asked questions