Codex is finally able to draw reasonably well

I discovered an effective tool called mcp_excalidraw — which combines the powers of an MCP server and a skill — to get codex to draw figures using Excalidraw reasonably well.

The difference between this tool and other alternatives is that, with this tool, Codex can see the figures by capturing screenshots using MCP calls. It is a bit of additional work to set up, but well worth it. I followed the following steps.

First, I cloned the git repo:

git clone [email protected]:yctimlin/mcp_excalidraw.git

Then I copied the skill to my own skills folder:

cp -R mcp_excalidraw/skills/excalidraw-skill ~/.agents/skills

Then I installed the MCP server:

codex mcp add excalidraw \
  --env EXPRESS_SERVER_URL=http://localhost:3000 \
  --env ENABLE_CANVAS_SYNC=true \
  -- node /Users/bli/Playground/mcp_excalidraw/dist/index.js

Finally, I started the local web server (which the git repo did not mention):

cd mcp_excalidraw
npm install
npm run build
HOST=0.0.0.0 PORT=3000 npm run canvas

In Codex, I just need to say: “Use the Excalidraw skill, draw…”. Here is an example figure drawn by Codex (with only minor adjustments by me).

When I don’t need to draw figures (which is most of the time), I would just remove it for better efficiency:

codex mcp remove excalidraw