Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
4e410f1205 | ||
|
|
71b2a55231 | ||
|
|
25767838fa | ||
|
|
493a20054b | ||
|
|
aa29ddbf13 | ||
|
|
9114e81f02 | ||
|
|
fac1c7a267 | ||
|
|
9311561227 |
@@ -15,6 +15,9 @@ public/dist/
|
||||
.cursor/
|
||||
.claude/
|
||||
|
||||
# User preferences (only the example ships)
|
||||
skills/excalidraw-skill/preferences.json
|
||||
|
||||
# Development artifacts
|
||||
*.excalidraw
|
||||
|
||||
|
||||
Generated
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@sanjibdevnath/mcp-excalidraw-local",
|
||||
"version": "1.2.1",
|
||||
"version": "1.5.1",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@sanjibdevnath/mcp-excalidraw-local",
|
||||
"version": "1.2.1",
|
||||
"version": "1.5.1",
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@sanjibdevnath/mcp-excalidraw-local",
|
||||
"version": "1.2.1",
|
||||
"version": "1.5.1",
|
||||
"description": "Fully local MCP server for Excalidraw with SQLite persistence, multi-tenancy, auto-sync, real-time canvas, and 32 tools",
|
||||
"main": "dist/index.js",
|
||||
"type": "module",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: excalidraw-skill
|
||||
description: Programmatic canvas toolkit for creating, editing, and refining Excalidraw diagrams via MCP tools (32 tools) or REST API with real-time canvas sync, multi-tenant workspace isolation, SQLite persistence, project management, full-text search, and element version history. Use when an agent needs to draw or lay out diagrams on a live canvas, iteratively refine diagrams using screenshots, manage workspaces/tenants and projects, export/import .excalidraw files or PNG/SVG images, search elements, view change history, save/restore canvas snapshots, or perform element-level CRUD. Canvas server port is configurable via CANVAS_PORT env var (default 3000).
|
||||
description: MANDATORY prerequisite for ALL Excalidraw MCP tool usage. Read this skill BEFORE calling any Excalidraw tool (batch_create_elements, create_element, create_from_mermaid, update_element, etc.) — without this skill's sizing formulas, two-batch ordering (shapes first, arrows second), and write-check-review verification cycle, diagrams will have invisible arrows, truncated text, and overlapping elements. Use whenever the user asks to draw, create, visualize, sketch, or diagram anything — flowcharts, architecture diagrams, system designs, org charts, sequence flows, decision trees, network topologies, ER diagrams, mind maps, or any visual on Excalidraw canvas. Also covers diagram refinement, PNG/SVG export, project/workspace management, and all canvas interactions.
|
||||
---
|
||||
|
||||
# Excalidraw Skill
|
||||
@@ -15,6 +15,79 @@ Run these checks **in order**:
|
||||
|
||||
See `references/cheatsheet.md` for the full MCP-vs-REST mapping and REST API gotchas.
|
||||
|
||||
## Step 1: Load User Preferences
|
||||
|
||||
Before creating any elements, load the user's diagram preferences. These control default font, roughness, stroke width, etc.
|
||||
|
||||
### Preference Resolution Order (most specific wins)
|
||||
|
||||
| Priority | Scope | Location | Persists |
|
||||
|----------|-------|----------|----------|
|
||||
| 1 (highest) | Session | In-memory (set via prompt during this conversation) | No — current session only |
|
||||
| 2 | Folder | `.claude/excalidraw-preferences.json` in the current project root | Yes — per-project |
|
||||
| 3 | Global | `~/.claude/skills/excalidraw-skill/preferences.json` | Yes — all projects |
|
||||
| 4 (lowest) | Hardcoded | Server defaults (fontFamily: 5, roughness: 0, fontSize: 20, strokeWidth: 2) | — |
|
||||
|
||||
### How to Load
|
||||
|
||||
1. **Check folder-level first**: Read `.claude/excalidraw-preferences.json` from the current working directory (or project root). If it exists and has `defaults`, use those values.
|
||||
2. **Fall back to global**: Read `~/.claude/skills/excalidraw-skill/preferences.json`. If it exists and has `defaults`, use those values.
|
||||
3. **If neither exists** → run the **First-Time Setup** prompt below.
|
||||
4. **Merge**: Folder preferences override global; global overrides hardcoded. Only override fields that are explicitly set.
|
||||
|
||||
### First-Time Setup (Interactive)
|
||||
|
||||
If no preferences file exists at either location, **prompt the user before drawing anything**:
|
||||
|
||||
> **Excalidraw Preferences Setup**
|
||||
>
|
||||
> I don't have any saved diagram preferences yet. Let me set up your defaults so every diagram looks the way you want.
|
||||
|
||||
Ask these questions (use `AskUserQuestion` tool if available, otherwise ask inline):
|
||||
|
||||
1. **Font family** — Which font for all text? _(IDs from `src/font-families.json`)_
|
||||
- Excalifont (hand-drawn) = 5
|
||||
- Helvetica (sans-serif) = 2
|
||||
- Cascadia (monospace) = 3
|
||||
- Comic Shanns = 8
|
||||
- Nunito = 6
|
||||
- Lilita One = 7
|
||||
|
||||
2. **Roughness** — Diagram style?
|
||||
- Clean/professional (roughness: 0) — recommended
|
||||
- Hand-drawn sketch (roughness: 1)
|
||||
- Very rough (roughness: 2)
|
||||
|
||||
3. **Scope** — Where to save?
|
||||
- **This session only** — don't save to disk, just use for this conversation
|
||||
- **This project** — save to `.claude/excalidraw-preferences.json` in project root
|
||||
- **Global (all projects)** — save to `~/.claude/skills/excalidraw-skill/preferences.json`
|
||||
|
||||
Then save the preferences JSON to the chosen location:
|
||||
|
||||
```json
|
||||
{
|
||||
"defaults": {
|
||||
"fontFamily": <user_choice>,
|
||||
"fontSize": 20,
|
||||
"roughness": <user_choice>,
|
||||
"strokeWidth": 2
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
For session-only scope, just hold the values in memory and apply them to every element in this conversation.
|
||||
|
||||
### Applying Preferences
|
||||
|
||||
Once loaded, apply `defaults` to **every element** that supports the property:
|
||||
- `fontFamily` → all text-containing elements (text, rectangles with labels, diamonds, ellipses, arrows with labels)
|
||||
- `fontSize` → text elements and labels (unless the element explicitly overrides it)
|
||||
- `roughness` → all elements
|
||||
- `strokeWidth` → arrows and lines
|
||||
|
||||
User-specified values in individual element calls always override preferences.
|
||||
|
||||
## Core Principles (Read Before Any Diagram)
|
||||
|
||||
These principles were learned through extensive iterative use. Violating them produces bad diagrams.
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"_comment": "Excalidraw MCP user preferences. Copy to preferences.json to activate.",
|
||||
"_fontReference": "See src/font-families.json for canonical font ID → name mapping.",
|
||||
"defaults": {
|
||||
"fontFamily": 5,
|
||||
"fontSize": 20,
|
||||
"roughness": 0,
|
||||
"strokeWidth": 2
|
||||
}
|
||||
}
|
||||
@@ -94,16 +94,15 @@
|
||||
|---------|----------------|-----------------|
|
||||
| Shape labels | `"text": "My Label"` (auto-converts) | `"label": {"text": "My Label"}` |
|
||||
| Arrow binding | `"startElementId": "id"` / `"endElementId": "id"` | `"start": {"id": "id"}` / `"end": {"id": "id"}` |
|
||||
| `fontFamily` | String `"1"` or omit | String `"1"` or omit (never a number) |
|
||||
| `fontFamily` | Number or string — use value from user preferences (see Step 1 in SKILL.md) | String — use value from user preferences |
|
||||
| Tenant scoping | Auto (uses active tenant) | Include `X-Tenant-Id` header on every request |
|
||||
|
||||
### Element Creation Best Practices
|
||||
|
||||
- **Always set `roughness: 0`** for clean, professional diagrams (default is hand-drawn).
|
||||
- **Always set `strokeWidth: 2`** on arrows for visibility.
|
||||
- **Always apply user preferences** — load from Step 1 in SKILL.md and apply `fontFamily`, `roughness`, `fontSize`, `strokeWidth` to every element.
|
||||
- **Create shapes first, arrows second** (two separate `batch_create_elements` calls).
|
||||
- **Assign custom `id`** to every shape so arrows can reference it.
|
||||
- **Size shapes for their text** — Virgil font is ~30% wider than standard. Use sizing formulas from SKILL.md.
|
||||
- **Size shapes for their text** — use sizing formulas from SKILL.md.
|
||||
- `points` accepts both `[[x,y]]` tuples and `[{x,y}]` objects — normalized automatically.
|
||||
- **Curved arrows**: Use `"roundness": {"type": 2}` with 3+ points. **Elbowed arrows**: Use `"elbowed": true`.
|
||||
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"fonts": [
|
||||
{ "id": 5, "name": "Excalifont", "label": "Excalifont (hand-drawn)", "aliases": ["excalifont", "hand-drawn"] },
|
||||
{ "id": 2, "name": "Helvetica", "label": "Helvetica (sans-serif)", "aliases": ["helvetica", "arial", "sans-serif"] },
|
||||
{ "id": 3, "name": "Cascadia", "label": "Cascadia (monospace)", "aliases": ["cascadia", "monospace", "courier"] },
|
||||
{ "id": 8, "name": "Comic Shanns", "label": "Comic Shanns", "aliases": ["comic shanns", "comic sans"] },
|
||||
{ "id": 6, "name": "Nunito", "label": "Nunito", "aliases": ["nunito"] },
|
||||
{ "id": 7, "name": "Lilita One", "label": "Lilita One", "aliases": ["lilita one"] },
|
||||
{ "id": 9, "name": "Liberation Sans", "label": "Liberation Sans", "aliases": ["liberation sans"], "legacy": true },
|
||||
{ "id": 1, "name": "Virgil", "label": "Virgil (legacy)", "aliases": ["virgil"], "legacy": true }
|
||||
],
|
||||
"defaultFontFamily": 5
|
||||
}
|
||||
+50
-7
@@ -27,7 +27,9 @@ import {
|
||||
ExcalidrawElementType,
|
||||
validateElement,
|
||||
normalizeFontFamily,
|
||||
files as globalFiles
|
||||
files as globalFiles,
|
||||
DEFAULT_FONT_FAMILY,
|
||||
FONT_FAMILY_DESCRIPTION,
|
||||
} from './types.js';
|
||||
import fetch from 'node-fetch';
|
||||
import { startCanvasServer, stopCanvasServer } from './server.js';
|
||||
@@ -65,6 +67,47 @@ const CANVAS_PORT = process.env.CANVAS_PORT || process.env.PORT || '3000';
|
||||
const EXPRESS_SERVER_URL = process.env.EXPRESS_SERVER_URL || `http://localhost:${CANVAS_PORT}`;
|
||||
const ENABLE_CANVAS_SYNC = true;
|
||||
|
||||
// User preferences for element defaults (font, roughness, etc.)
|
||||
// Resolution: folder-level .claude/excalidraw-preferences.json > global ~/.claude/skills/excalidraw-skill/preferences.json > hardcoded
|
||||
interface ExcalidrawPreferences {
|
||||
fontFamily: number;
|
||||
fontSize: number;
|
||||
roughness: number;
|
||||
strokeWidth: number;
|
||||
}
|
||||
|
||||
const HARDCODED_DEFAULTS: ExcalidrawPreferences = {
|
||||
fontFamily: DEFAULT_FONT_FAMILY,
|
||||
fontSize: 20,
|
||||
roughness: 0,
|
||||
strokeWidth: 2,
|
||||
};
|
||||
|
||||
function loadPreferences(): ExcalidrawPreferences {
|
||||
const locations = [
|
||||
path.join(process.cwd(), '.claude', 'excalidraw-preferences.json'),
|
||||
path.join(process.env.HOME || '~', '.claude', 'skills', 'excalidraw-skill', 'preferences.json'),
|
||||
];
|
||||
|
||||
for (const loc of locations) {
|
||||
try {
|
||||
if (fs.existsSync(loc)) {
|
||||
const raw = JSON.parse(fs.readFileSync(loc, 'utf-8'));
|
||||
if (raw?.defaults) {
|
||||
logger.info(`Loaded user preferences from ${loc}`);
|
||||
return { ...HARDCODED_DEFAULTS, ...raw.defaults };
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
logger.warn(`Failed to read preferences from ${loc}: ${e}`);
|
||||
}
|
||||
}
|
||||
|
||||
return HARDCODED_DEFAULTS;
|
||||
}
|
||||
|
||||
const USER_PREFS = loadPreferences();
|
||||
|
||||
// One-time tokens for clear_canvas confirmation (token → expiry timestamp)
|
||||
const pendingClearTokens = new Map<string, { expiresAt: number; elementCount: number }>();
|
||||
const CLEAR_TOKEN_TTL_MS = 120_000; // 2 minutes
|
||||
@@ -418,7 +461,7 @@ const tools: Tool[] = [
|
||||
opacity: { type: 'number' },
|
||||
text: { type: 'string' },
|
||||
fontSize: { type: 'number' },
|
||||
fontFamily: { type: ['string', 'number'], description: 'Font family: 1=Excalifont (hand-drawn), 2=Helvetica (sans-serif), 3=Cascadia (monospace), 4=Comic Shanns, 5=Liberation Sans, 6=Nunito, 7=Lilita One. Accepts name strings too.' },
|
||||
fontFamily: { type: ['string', 'number'], description: FONT_FAMILY_DESCRIPTION },
|
||||
startElementId: { type: 'string', description: 'For arrows: ID of the element to bind the arrow start to. Arrow auto-routes to element edge.' },
|
||||
endElementId: { type: 'string', description: 'For arrows: ID of the element to bind the arrow end to. Arrow auto-routes to element edge.' },
|
||||
endArrowhead: { type: 'string', description: 'Arrowhead style at end: arrow, bar, dot, triangle, or null' },
|
||||
@@ -649,7 +692,7 @@ const tools: Tool[] = [
|
||||
opacity: { type: 'number' },
|
||||
text: { type: 'string' },
|
||||
fontSize: { type: 'number' },
|
||||
fontFamily: { type: ['string', 'number'], description: 'Font family: 1=Excalifont, 2=Helvetica, 3=Cascadia, 4=Comic Shanns, 5=Liberation Sans, 6=Nunito, 7=Lilita One. Accepts name strings too.' },
|
||||
fontFamily: { type: ['string', 'number'], description: FONT_FAMILY_DESCRIPTION },
|
||||
startElementId: { type: 'string', description: 'For arrows: ID of element to bind arrow start to' },
|
||||
endElementId: { type: 'string', description: 'For arrows: ID of element to bind arrow end to' },
|
||||
endArrowhead: { type: 'string', description: 'Arrowhead style at end: arrow, bar, dot, triangle, or null' },
|
||||
@@ -2199,8 +2242,8 @@ server.setRequestHandler(CallToolRequestSchema, async (request: CallToolRequest)
|
||||
if (el.type === 'text') {
|
||||
base.text = text ?? '';
|
||||
base.originalText = text ?? '';
|
||||
base.fontSize = rest.fontSize ?? 20;
|
||||
base.fontFamily = rest.fontFamily ?? 1;
|
||||
base.fontSize = rest.fontSize ?? USER_PREFS.fontSize;
|
||||
base.fontFamily = rest.fontFamily ?? USER_PREFS.fontFamily;
|
||||
base.textAlign = rest.textAlign ?? 'center';
|
||||
base.verticalAlign = rest.verticalAlign ?? 'middle';
|
||||
base.autoResize = rest.autoResize ?? true;
|
||||
@@ -2294,8 +2337,8 @@ server.setRequestHandler(CallToolRequestSchema, async (request: CallToolRequest)
|
||||
locked: false,
|
||||
text: labelText,
|
||||
originalText: labelText,
|
||||
fontSize: isArrow ? 14 : (rest.fontSize ?? 16),
|
||||
fontFamily: rest.fontFamily ?? 1,
|
||||
fontSize: isArrow ? 14 : (rest.fontSize ?? USER_PREFS.fontSize),
|
||||
fontFamily: rest.fontFamily ?? USER_PREFS.fontFamily,
|
||||
textAlign: 'center',
|
||||
verticalAlign: 'middle',
|
||||
autoResize: true,
|
||||
|
||||
+221
-6
@@ -13,6 +13,7 @@ import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import * as os from 'os';
|
||||
import { execSync } from 'child_process';
|
||||
import { FONT_FAMILIES, DEFAULT_FONT_FAMILY } from './types.js';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
@@ -57,6 +58,11 @@ interface AgentDef {
|
||||
mcpConfigPath?: string;
|
||||
mcpCliRemove?: string;
|
||||
mcpCliCommand?: string;
|
||||
instructionConfig?: {
|
||||
global: string;
|
||||
local: string;
|
||||
format: 'claude-md' | 'cursor-mdc';
|
||||
};
|
||||
}
|
||||
|
||||
function getAgents(): AgentDef[] {
|
||||
@@ -71,6 +77,11 @@ function getAgents(): AgentDef[] {
|
||||
},
|
||||
mcpConfigType: 'json-file',
|
||||
mcpConfigPath: path.join(home, '.cursor', 'mcp.json'),
|
||||
instructionConfig: {
|
||||
global: path.join(home, '.cursor', 'rules', 'excalidraw.mdc'),
|
||||
local: path.join(process.cwd(), '.cursor', 'rules', 'excalidraw.mdc'),
|
||||
format: 'cursor-mdc',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Claude Code',
|
||||
@@ -82,6 +93,11 @@ function getAgents(): AgentDef[] {
|
||||
mcpConfigType: 'cli-command',
|
||||
mcpCliRemove: 'claude mcp remove excalidraw-canvas --scope user',
|
||||
mcpCliCommand: 'claude mcp add excalidraw-canvas --scope user -e CANVAS_PORT=3000 -- npx -y @sanjibdevnath/mcp-excalidraw-local@latest',
|
||||
instructionConfig: {
|
||||
global: path.join(home, '.claude', 'CLAUDE.md'),
|
||||
local: path.join(process.cwd(), 'CLAUDE.md'),
|
||||
format: 'claude-md',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Codex CLI',
|
||||
@@ -103,7 +119,7 @@ function detectInstalledAgents(): AgentDef[] {
|
||||
// ── Phase 1: Environment Check ──────────────────────────────
|
||||
|
||||
async function phaseEnvironment(rl: readline.Interface): Promise<boolean> {
|
||||
heading('1/3', 'Environment');
|
||||
heading('1/4', 'Environment');
|
||||
let allOk = true;
|
||||
|
||||
// Node.js version
|
||||
@@ -167,10 +183,99 @@ async function phaseEnvironment(rl: readline.Interface): Promise<boolean> {
|
||||
return allOk;
|
||||
}
|
||||
|
||||
// ── Preference Setup ─────────────────────────────────────────
|
||||
|
||||
// Derived from FONT_FAMILIES in types.ts — single source of truth
|
||||
const FONT_OPTIONS = FONT_FAMILIES
|
||||
.filter(f => !f.legacy)
|
||||
.map(f => ({ value: f.id, label: f.label }));
|
||||
|
||||
const ROUGHNESS_OPTIONS: { value: number; label: string }[] = [
|
||||
{ value: 0, label: 'Clean / professional' },
|
||||
{ value: 1, label: 'Hand-drawn sketch' },
|
||||
{ value: 2, label: 'Very rough' },
|
||||
];
|
||||
|
||||
function getGlobalPreferencesPath(): string {
|
||||
return path.join(os.homedir(), '.claude', 'skills', 'excalidraw-skill', 'preferences.json');
|
||||
}
|
||||
|
||||
function globalPreferencesExist(): boolean {
|
||||
return fs.existsSync(getGlobalPreferencesPath());
|
||||
}
|
||||
|
||||
function writePreferencesFile(filePath: string, prefs: { fontFamily: number; fontSize: number; roughness: number; strokeWidth: number }): void {
|
||||
const dir = path.dirname(filePath);
|
||||
if (!fs.existsSync(dir)) {
|
||||
fs.mkdirSync(dir, { recursive: true });
|
||||
}
|
||||
const content = {
|
||||
defaults: prefs,
|
||||
};
|
||||
fs.writeFileSync(filePath, JSON.stringify(content, null, 2) + '\n', 'utf-8');
|
||||
}
|
||||
|
||||
async function phasePreferences(rl: readline.Interface, phaseLabel: string): Promise<void> {
|
||||
heading(phaseLabel, 'Diagram Preferences');
|
||||
|
||||
const prefsPath = getGlobalPreferencesPath();
|
||||
|
||||
if (globalPreferencesExist()) {
|
||||
try {
|
||||
const raw = JSON.parse(fs.readFileSync(prefsPath, 'utf-8'));
|
||||
const d = raw?.defaults;
|
||||
if (d) {
|
||||
const fontLabel = FONT_OPTIONS.find(f => f.value === d.fontFamily)?.label ?? `font ${d.fontFamily}`;
|
||||
const roughLabel = ROUGHNESS_OPTIONS.find(r => r.value === d.roughness)?.label ?? `roughness ${d.roughness}`;
|
||||
ok(`Current: ${fontLabel}, ${roughLabel}, fontSize ${d.fontSize}, strokeWidth ${d.strokeWidth}`);
|
||||
const change = await confirm(rl, 'Change preferences?', false);
|
||||
if (!change) return;
|
||||
}
|
||||
} catch {
|
||||
warn(`Could not read ${prefsPath}, will reconfigure.`);
|
||||
}
|
||||
}
|
||||
|
||||
info('These defaults apply to every diagram (font, style, etc.).');
|
||||
info('');
|
||||
|
||||
// Font
|
||||
process.stdout.write('\n Font family:\n');
|
||||
FONT_OPTIONS.forEach((f, i) => {
|
||||
const marker = f.value === DEFAULT_FONT_FAMILY ? ' (default)' : '';
|
||||
process.stdout.write(` ${CYAN}[${i + 1}]${RESET} ${f.label}${marker}\n`);
|
||||
});
|
||||
const fontAnswer = (await ask(rl, 'Choose [1]: ')).trim();
|
||||
const fontIdx = fontAnswer === '' ? 0 : parseInt(fontAnswer, 10) - 1;
|
||||
const fontFamily = (fontIdx >= 0 && fontIdx < FONT_OPTIONS.length) ? FONT_OPTIONS[fontIdx]!.value : DEFAULT_FONT_FAMILY;
|
||||
|
||||
// Roughness
|
||||
process.stdout.write('\n Diagram style:\n');
|
||||
ROUGHNESS_OPTIONS.forEach((r, i) => {
|
||||
const marker = r.value === 0 ? ' (default)' : '';
|
||||
process.stdout.write(` ${CYAN}[${i + 1}]${RESET} ${r.label}${marker}\n`);
|
||||
});
|
||||
const roughAnswer = (await ask(rl, 'Choose [1]: ')).trim();
|
||||
const roughIdx = roughAnswer === '' ? 0 : parseInt(roughAnswer, 10) - 1;
|
||||
const roughness = (roughIdx >= 0 && roughIdx < ROUGHNESS_OPTIONS.length) ? ROUGHNESS_OPTIONS[roughIdx]!.value : 0;
|
||||
|
||||
const prefs = { fontFamily, fontSize: 20, roughness, strokeWidth: 2 };
|
||||
|
||||
try {
|
||||
writePreferencesFile(prefsPath, prefs);
|
||||
const fontLabel = FONT_OPTIONS.find(f => f.value === fontFamily)?.label ?? `${fontFamily}`;
|
||||
const roughLabel = ROUGHNESS_OPTIONS.find(r => r.value === roughness)?.label ?? `${roughness}`;
|
||||
ok(`Saved: ${fontLabel}, ${roughLabel}`);
|
||||
ok(`File: ${prefsPath}`);
|
||||
} catch (err) {
|
||||
fail(`Failed to save preferences: ${(err as Error).message}`);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Phase 2: Skill Installation ─────────────────────────────
|
||||
|
||||
async function phaseSkillInstall(rl: readline.Interface): Promise<void> {
|
||||
heading('2/3', 'Agent Skill');
|
||||
heading('2/4', 'Agent Skill');
|
||||
|
||||
const wantSkill = await confirm(rl, 'Install the Excalidraw agent skill?');
|
||||
if (!wantSkill) {
|
||||
@@ -226,6 +331,17 @@ async function phaseSkillInstall(rl: readline.Interface): Promise<void> {
|
||||
fs.mkdirSync(destDir, { recursive: true });
|
||||
copyDirSync(skillSource, destDir);
|
||||
ok(`Installed to ${destDir}`);
|
||||
|
||||
// Write instruction directive to ensure skill auto-triggers
|
||||
if (agent.instructionConfig) {
|
||||
const instrPath = agent.instructionConfig[scope];
|
||||
try {
|
||||
writeInstructionDirective(instrPath, agent.instructionConfig.format);
|
||||
ok(`Skill directive added to ${instrPath}`);
|
||||
} catch (instrErr) {
|
||||
warn(`Could not write directive to ${instrPath}: ${(instrErr as Error).message}`);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
fail(`Failed to install to ${destDir}: ${(err as Error).message}`);
|
||||
}
|
||||
@@ -245,10 +361,83 @@ function copyDirSync(src: string, dest: string): void {
|
||||
}
|
||||
}
|
||||
|
||||
// ── Instruction Directives ──────────────────────────────────
|
||||
|
||||
const DIRECTIVE_MARKER_START = '<!-- excalidraw-mcp:start -->';
|
||||
const DIRECTIVE_MARKER_END = '<!-- excalidraw-mcp:end -->';
|
||||
|
||||
const EXCALIDRAW_DIRECTIVE_BODY =
|
||||
'When Excalidraw MCP tools are available (batch_create_elements, create_element, ' +
|
||||
'create_from_mermaid, etc.), ALWAYS invoke the `/excalidraw-skill` skill FIRST ' +
|
||||
'before calling any Excalidraw tool. The skill contains essential sizing formulas, ' +
|
||||
'batch ordering rules (shapes first, arrows second), and a mandatory ' +
|
||||
'write-check-review verification cycle. Using Excalidraw tools without consulting ' +
|
||||
'this skill produces broken diagrams — invisible arrows, truncated text, ' +
|
||||
'overlapping elements.';
|
||||
|
||||
function buildClaudeMdSection(): string {
|
||||
return [
|
||||
DIRECTIVE_MARKER_START,
|
||||
'## Excalidraw Canvas — Skill Directive',
|
||||
'',
|
||||
EXCALIDRAW_DIRECTIVE_BODY,
|
||||
DIRECTIVE_MARKER_END,
|
||||
].join('\n');
|
||||
}
|
||||
|
||||
function buildCursorMdc(): string {
|
||||
return [
|
||||
'---',
|
||||
'description: Always consult excalidraw-skill before using Excalidraw MCP tools',
|
||||
'globs:',
|
||||
'alwaysApply: true',
|
||||
'---',
|
||||
'',
|
||||
'## Excalidraw Canvas — Skill Directive',
|
||||
'',
|
||||
EXCALIDRAW_DIRECTIVE_BODY,
|
||||
'',
|
||||
].join('\n');
|
||||
}
|
||||
|
||||
function writeInstructionDirective(filePath: string, format: 'claude-md' | 'cursor-mdc'): void {
|
||||
const dir = path.dirname(filePath);
|
||||
if (!fs.existsSync(dir)) {
|
||||
fs.mkdirSync(dir, { recursive: true });
|
||||
}
|
||||
|
||||
if (format === 'cursor-mdc') {
|
||||
// Cursor .mdc files are standalone — write/overwrite the whole file
|
||||
fs.writeFileSync(filePath, buildCursorMdc(), 'utf-8');
|
||||
return;
|
||||
}
|
||||
|
||||
// For claude-md: append or replace the marked section
|
||||
let content = '';
|
||||
if (fs.existsSync(filePath)) {
|
||||
content = fs.readFileSync(filePath, 'utf-8');
|
||||
}
|
||||
|
||||
const section = buildClaudeMdSection();
|
||||
const startIdx = content.indexOf(DIRECTIVE_MARKER_START);
|
||||
const endIdx = content.indexOf(DIRECTIVE_MARKER_END);
|
||||
|
||||
if (startIdx !== -1 && endIdx !== -1) {
|
||||
// Replace existing section
|
||||
content = content.slice(0, startIdx) + section + content.slice(endIdx + DIRECTIVE_MARKER_END.length);
|
||||
} else {
|
||||
// Append with spacing
|
||||
const trimmed = content.trimEnd();
|
||||
content = trimmed + (trimmed ? '\n\n' : '') + section + '\n';
|
||||
}
|
||||
|
||||
fs.writeFileSync(filePath, content, 'utf-8');
|
||||
}
|
||||
|
||||
// ── Phase 3: MCP Configuration ──────────────────────────────
|
||||
|
||||
async function phaseMcpConfig(rl: readline.Interface): Promise<void> {
|
||||
heading('3/3', 'MCP Configuration');
|
||||
heading('4/4', 'MCP Configuration');
|
||||
|
||||
const wantConfig = await confirm(rl, 'Add MCP server to agent configs automatically?');
|
||||
if (!wantConfig) {
|
||||
@@ -420,7 +609,7 @@ export async function runUpdate(): Promise<void> {
|
||||
|
||||
try {
|
||||
// ── Phase 1: Detect existing skill installations ──────────
|
||||
heading('1/2', 'Skill Update');
|
||||
heading('1/3', 'Skill Update');
|
||||
|
||||
const allInstalls = findExistingSkillInstalls();
|
||||
const existing = allInstalls.filter(i => i.exists);
|
||||
@@ -450,6 +639,17 @@ export async function runUpdate(): Promise<void> {
|
||||
copyDirSync(skillSource, inst.path);
|
||||
ok(`Updated ${inst.agent.name} (${inst.scope}) — ${inst.path}`);
|
||||
updated++;
|
||||
|
||||
// Update instruction directive
|
||||
if (inst.agent.instructionConfig) {
|
||||
const instrPath = inst.agent.instructionConfig[inst.scope];
|
||||
try {
|
||||
writeInstructionDirective(instrPath, inst.agent.instructionConfig.format);
|
||||
ok(`Skill directive updated in ${instrPath}`);
|
||||
} catch (instrErr) {
|
||||
warn(`Could not update directive in ${instrPath}: ${(instrErr as Error).message}`);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
fail(`Failed to update ${inst.path}: ${(err as Error).message}`);
|
||||
}
|
||||
@@ -484,6 +684,17 @@ export async function runUpdate(): Promise<void> {
|
||||
fs.mkdirSync(destDir, { recursive: true });
|
||||
copyDirSync(skillSource, destDir);
|
||||
ok(`Installed to ${destDir}`);
|
||||
|
||||
// Write instruction directive
|
||||
if (agent.instructionConfig) {
|
||||
const instrPath = agent.instructionConfig[scope];
|
||||
try {
|
||||
writeInstructionDirective(instrPath, agent.instructionConfig.format);
|
||||
ok(`Skill directive added to ${instrPath}`);
|
||||
} catch (instrErr) {
|
||||
warn(`Could not write directive to ${instrPath}: ${(instrErr as Error).message}`);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
fail(`Failed to install to ${destDir}: ${(err as Error).message}`);
|
||||
}
|
||||
@@ -491,8 +702,11 @@ export async function runUpdate(): Promise<void> {
|
||||
}
|
||||
}
|
||||
|
||||
// ── Phase 2: MCP config check ────────────────────────────
|
||||
heading('2/2', 'MCP Configuration');
|
||||
// ── Phase 2: Preferences ─────────────────────────────────
|
||||
await phasePreferences(rl, '2/3');
|
||||
|
||||
// ── Phase 3: MCP config check ────────────────────────────
|
||||
heading('3/3', 'MCP Configuration');
|
||||
|
||||
for (const agent of detectedAgents) {
|
||||
if (agent.mcpConfigType === 'json-file' && agent.mcpConfigPath) {
|
||||
@@ -564,6 +778,7 @@ export async function runSetup(): Promise<void> {
|
||||
try {
|
||||
await phaseEnvironment(rl);
|
||||
await phaseSkillInstall(rl);
|
||||
await phasePreferences(rl, '3/4');
|
||||
await phaseMcpConfig(rl);
|
||||
|
||||
process.stdout.write(`\n ${GREEN}${BOLD}Done!${RESET} Open ${CYAN}http://localhost:3000${RESET} to verify the canvas.\n\n`);
|
||||
|
||||
+30
-18
@@ -311,24 +311,36 @@ export interface ExcalidrawFile {
|
||||
// In-memory file storage (image files are too large for SQLite row storage)
|
||||
export const files = new Map<string, ExcalidrawFile>();
|
||||
|
||||
// Font family normalization: Excalidraw expects numeric IDs, but agents
|
||||
// often send string names. Map common names to their numeric equivalents.
|
||||
const FONT_FAMILY_MAP: Record<string, number> = {
|
||||
'virgil': 1,
|
||||
'hand-drawn': 1,
|
||||
'excalifont': 1,
|
||||
'helvetica': 2,
|
||||
'arial': 2,
|
||||
'sans-serif': 2,
|
||||
'cascadia': 3,
|
||||
'monospace': 3,
|
||||
'courier': 3,
|
||||
'comic shanns': 4,
|
||||
'comic sans': 4,
|
||||
'liberation sans': 5,
|
||||
'nunito': 6,
|
||||
'lilita one': 7,
|
||||
};
|
||||
// ── Font families — single source of truth ──────────────────────────────
|
||||
// IDs match the @excalidraw/excalidraw FONT_FAMILY constant.
|
||||
// The canonical data lives in font-families.json; every other file derives from it.
|
||||
import fontData from './font-families.json' with { type: 'json' };
|
||||
|
||||
export interface FontFamilyDef {
|
||||
id: number;
|
||||
name: string;
|
||||
label: string;
|
||||
aliases: string[];
|
||||
legacy?: boolean; // hidden from setup menus / tool docs
|
||||
}
|
||||
|
||||
export const FONT_FAMILIES: FontFamilyDef[] = fontData.fonts as FontFamilyDef[];
|
||||
|
||||
export const DEFAULT_FONT_FAMILY: number = fontData.defaultFontFamily;
|
||||
|
||||
// Derived: description string for MCP tool schemas
|
||||
export const FONT_FAMILY_DESCRIPTION =
|
||||
'Font family: ' +
|
||||
FONT_FAMILIES.filter(f => !f.legacy).map(f => `${f.id}=${f.name}`).join(', ') +
|
||||
'. Accepts name strings too.';
|
||||
|
||||
// Derived: string → number mapping for normalization
|
||||
const FONT_FAMILY_MAP: Record<string, number> = {};
|
||||
for (const font of FONT_FAMILIES) {
|
||||
for (const alias of font.aliases) {
|
||||
FONT_FAMILY_MAP[alias] = font.id;
|
||||
}
|
||||
}
|
||||
|
||||
export function normalizeFontFamily(value: string | number | undefined): number | undefined {
|
||||
if (value === undefined || value === null) return undefined;
|
||||
|
||||
Reference in New Issue
Block a user