excalidraw

Excalidraw

You write a short JavaScript file that uses the Excalidraw plugin's drawing commands (ea). The helper draw.mjs (in this skill's folder) runs it inside Obsidian, opens the drawing and takes a screenshot. You look at the screenshot and fix what is wrong.

Before you start

• Obsidian must be running with the vault open and the Excalidraw plugin installed. The Obsidian command line tool (obsidian) must be turned on: Settings → General → Command line interface.
• Quick check: obsidian eval code="typeof ExcalidrawAutomate" must print => object.
• If the user did not say what to draw, ask. If they did not say where to save it, leave out foldername: the plugin then uses the user's own drawing folder.

Steps

1. Write the drawing file (for example drawing.js) in a scratch folder, not in the vault.
2. Run node <this skill's folder>/draw.mjs drawing.js. It uses the vault that is open in front and prints its name, the path of the new drawing and the path of the screenshot. If that is the wrong vault, ask the user to bring the right one to the front.
3. Look at the screenshot. Check for overlaps you did not intend, text sitting on lines, anything cut off, and text that is hard to read.
4. To fix something, edit drawing.js. Before running again, delete the drawing your last run made (only that one, never a drawing you did not create): obsidian vault="<vault>" delete path="<drawing path>".
5. Tell the user where the drawing is and show the screenshot path.

The drawing file

Write plain lines of JavaScript, with no function around them. ea is ready to use, and await works. The last line creates the drawing and returns its path.

ea.style.fontFamily = 5;            // hand-drawn font
ea.style.fillStyle = "solid";
ea.style.roundness = { type: 3 };   // rounded corners

ea.style.backgroundColor = "#a5d8ff";
const a = ea.addText(0, 0, "Idea", { box: "box", textAlign: "center", textVerticalAlign: "middle" });
ea.style.backgroundColor = "#b2f2bb";
const b = ea.addText(250, 0, "Done", { box: "box", textAlign: "center", textVerticalAlign: "middle" });

ea.style.backgroundColor = "transparent";
ea.connectObjects(a, "right", b, "left", { endArrowHead: "arrow" });

return ea.create({ filename: "my-drawing", silent: true });   // add foldername: "..." to pick a folder