@pixerate/editor 0.223.1 → 0.223.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/agent/index.cjs +2 -2
- package/dist/agent/index.js +1 -1
- package/dist/{chunk-SVHXD2VH.js → chunk-H73MSHYZ.js} +5 -1
- package/dist/{chunk-BDT2IYXK.cjs → chunk-VXLYEYP4.cjs} +6 -2
- package/dist/tools/index.cjs +2 -2
- package/dist/tools/index.js +1 -1
- package/dist/tools/skill-evals.d.cts +6 -1
- package/dist/tools/skill-evals.d.ts +6 -1
- package/package.json +1 -1
- package/skills/README.md +5 -1
- package/skills/pixerate-diagram/SKILL.md +8 -0
- package/skills/pixerate-diagram-architecture/SKILL.md +104 -0
- package/skills/pixerate-diagram-architecture/evals/label-protocols.json +62 -0
- package/skills/pixerate-diagram-architecture/evals/trust-boundaries.json +64 -0
- package/skills/pixerate-diagram-architecture/evals/web-app.json +56 -0
- package/skills/pixerate-diagram-process-flow/SKILL.md +99 -0
- package/skills/pixerate-diagram-process-flow/evals/order-process.json +73 -0
- package/skills/pixerate-diagram-process-flow/evals/swimlanes.json +74 -0
- package/skills/pixerate-diagram-process-flow/evals/tidy-decision.json +76 -0
- package/skills/pixerate-spreadsheet/SKILL.md +2 -0
- package/skills/pixerate-spreadsheet-analysis/SKILL.md +97 -0
- package/skills/pixerate-spreadsheet-analysis/evals/count-and-average.json +148 -0
- package/skills/pixerate-spreadsheet-analysis/evals/month-over-month.json +128 -0
- package/skills/pixerate-spreadsheet-analysis/evals/summary-by-region.json +178 -0
- package/skills/pixerate-spreadsheet-financial-model/SKILL.md +98 -0
- package/skills/pixerate-spreadsheet-financial-model/evals/find-hardcoded.json +113 -0
- package/skills/pixerate-spreadsheet-financial-model/evals/projection-with-inputs.json +118 -0
- package/skills/pixerate-spreadsheet-financial-model/evals/scenarios.json +136 -0
package/dist/agent/index.cjs
CHANGED
|
@@ -30,7 +30,7 @@ require('../chunk-4EFNS2HV.cjs');
|
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
|
|
33
|
-
var
|
|
33
|
+
var _chunkVXLYEYP4cjs = require('../chunk-VXLYEYP4.cjs');
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|
|
@@ -2281,4 +2281,4 @@ function createCanvasComponentToolProvider(controller, options = { id: "canvas-c
|
|
|
2281
2281
|
|
|
2282
2282
|
|
|
2283
2283
|
|
|
2284
|
-
exports.AgentPlayback = _chunk3SLBXKAWcjs.AgentPlayback; exports.CAPTURE_EXCLUDE_SELECTOR = _chunkSVFEVKLFcjs.CAPTURE_EXCLUDE_SELECTOR; exports.CAPTURE_OVERLAY_SELECTORS = _chunkSVFEVKLFcjs.CAPTURE_OVERLAY_SELECTORS; exports.EDITOR_CANVAS_TOOLS = _chunkSVFEVKLFcjs.EDITOR_CANVAS_TOOLS; exports.EDITOR_MCP_TOOLS = _chunkSVFEVKLFcjs.EDITOR_MCP_TOOLS; exports.EDITOR_PROMPT_TOOLS = _chunkSVFEVKLFcjs.EDITOR_PROMPT_TOOLS; exports.EDIT_OPERATION_REQUIRED_ARGUMENTS = _chunkSVFEVKLFcjs.EDIT_OPERATION_REQUIRED_ARGUMENTS; exports.EXPORT_EXCLUDED_SELECTORS = _chunkSVFEVKLFcjs.EXPORT_EXCLUDED_SELECTORS; exports.JSON_RPC_ERRORS = _chunkZ7BVK32Ccjs.JSON_RPC_ERRORS; exports.MCP_PROTOCOL_VERSIONS = _chunkZ7BVK32Ccjs.MCP_PROTOCOL_VERSIONS; exports.MCP_TOOL_CANVAS_ADD_NODE = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_ADD_NODE; exports.MCP_TOOL_CANVAS_CONNECT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_CONNECT; exports.MCP_TOOL_CANVAS_HIGHLIGHT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_HIGHLIGHT; exports.MCP_TOOL_CANVAS_LAYOUT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_LAYOUT; exports.MCP_TOOL_CANVAS_REMOVE_NODES = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_REMOVE_NODES; exports.MCP_TOOL_CANVAS_SELECT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_SELECT; exports.MCP_TOOL_CANVAS_UPDATE_NODE = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_UPDATE_NODE; exports.MCP_TOOL_EDIT_CANVAS = _chunkSVFEVKLFcjs.MCP_TOOL_EDIT_CANVAS; exports.MCP_TOOL_EDIT_PROMPT = _chunkSVFEVKLFcjs.MCP_TOOL_EDIT_PROMPT; exports.MCP_TOOL_GET_EDITOR_STATE = _chunkSVFEVKLFcjs.MCP_TOOL_GET_EDITOR_STATE; exports.MCP_TOOL_PROMPT_INSERT_TEXT = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_INSERT_TEXT; exports.MCP_TOOL_PROMPT_REPLACE_RANGE = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_REPLACE_RANGE; exports.MCP_TOOL_PROMPT_SELECT = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_SELECT; exports.MCP_TOOL_PROMPT_SET_VARIABLE = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_SET_VARIABLE; exports.MCP_TOOL_VIEW_EDITOR = _chunkSVFEVKLFcjs.MCP_TOOL_VIEW_EDITOR; exports.PRESENCE_COLORS = _chunkK7ENM55Pcjs.PRESENCE_COLORS; exports.PerformanceQueue = _chunkK7ENM55Pcjs.PerformanceQueue; exports.PresenceStore = _chunkK7ENM55Pcjs.PresenceStore; exports.TOOL_BRIDGE_DEFAULT_PORT = _chunkZ7BVK32Ccjs.TOOL_BRIDGE_DEFAULT_PORT; exports.TOOL_BRIDGE_PROTOCOL = _chunkZ7BVK32Ccjs.TOOL_BRIDGE_PROTOCOL; exports.TOOL_DISCOVERY_TOOLS = _chunkZ7BVK32Ccjs.TOOL_DISCOVERY_TOOLS; exports.TOOL_NAMESPACE_SEPARATOR = _chunkZ7BVK32Ccjs.TOOL_NAMESPACE_SEPARATOR; exports.ToolRegistry = _chunkZ7BVK32Ccjs.ToolRegistry; exports.ToolRegistryError = _chunkZ7BVK32Ccjs.ToolRegistryError; exports.ToolRegistryView = _chunkZ7BVK32Ccjs.ToolRegistryView; exports.UNSAFE_JSON_KEYS = _chunk2BSBFBOAcjs.UNSAFE_JSON_KEYS; exports.baseToolName = _chunkZ7BVK32Ccjs.baseToolName; exports.callEvalTool =
|
|
2284
|
+
exports.AgentPlayback = _chunk3SLBXKAWcjs.AgentPlayback; exports.CAPTURE_EXCLUDE_SELECTOR = _chunkSVFEVKLFcjs.CAPTURE_EXCLUDE_SELECTOR; exports.CAPTURE_OVERLAY_SELECTORS = _chunkSVFEVKLFcjs.CAPTURE_OVERLAY_SELECTORS; exports.EDITOR_CANVAS_TOOLS = _chunkSVFEVKLFcjs.EDITOR_CANVAS_TOOLS; exports.EDITOR_MCP_TOOLS = _chunkSVFEVKLFcjs.EDITOR_MCP_TOOLS; exports.EDITOR_PROMPT_TOOLS = _chunkSVFEVKLFcjs.EDITOR_PROMPT_TOOLS; exports.EDIT_OPERATION_REQUIRED_ARGUMENTS = _chunkSVFEVKLFcjs.EDIT_OPERATION_REQUIRED_ARGUMENTS; exports.EXPORT_EXCLUDED_SELECTORS = _chunkSVFEVKLFcjs.EXPORT_EXCLUDED_SELECTORS; exports.JSON_RPC_ERRORS = _chunkZ7BVK32Ccjs.JSON_RPC_ERRORS; exports.MCP_PROTOCOL_VERSIONS = _chunkZ7BVK32Ccjs.MCP_PROTOCOL_VERSIONS; exports.MCP_TOOL_CANVAS_ADD_NODE = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_ADD_NODE; exports.MCP_TOOL_CANVAS_CONNECT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_CONNECT; exports.MCP_TOOL_CANVAS_HIGHLIGHT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_HIGHLIGHT; exports.MCP_TOOL_CANVAS_LAYOUT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_LAYOUT; exports.MCP_TOOL_CANVAS_REMOVE_NODES = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_REMOVE_NODES; exports.MCP_TOOL_CANVAS_SELECT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_SELECT; exports.MCP_TOOL_CANVAS_UPDATE_NODE = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_UPDATE_NODE; exports.MCP_TOOL_EDIT_CANVAS = _chunkSVFEVKLFcjs.MCP_TOOL_EDIT_CANVAS; exports.MCP_TOOL_EDIT_PROMPT = _chunkSVFEVKLFcjs.MCP_TOOL_EDIT_PROMPT; exports.MCP_TOOL_GET_EDITOR_STATE = _chunkSVFEVKLFcjs.MCP_TOOL_GET_EDITOR_STATE; exports.MCP_TOOL_PROMPT_INSERT_TEXT = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_INSERT_TEXT; exports.MCP_TOOL_PROMPT_REPLACE_RANGE = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_REPLACE_RANGE; exports.MCP_TOOL_PROMPT_SELECT = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_SELECT; exports.MCP_TOOL_PROMPT_SET_VARIABLE = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_SET_VARIABLE; exports.MCP_TOOL_VIEW_EDITOR = _chunkSVFEVKLFcjs.MCP_TOOL_VIEW_EDITOR; exports.PRESENCE_COLORS = _chunkK7ENM55Pcjs.PRESENCE_COLORS; exports.PerformanceQueue = _chunkK7ENM55Pcjs.PerformanceQueue; exports.PresenceStore = _chunkK7ENM55Pcjs.PresenceStore; exports.TOOL_BRIDGE_DEFAULT_PORT = _chunkZ7BVK32Ccjs.TOOL_BRIDGE_DEFAULT_PORT; exports.TOOL_BRIDGE_PROTOCOL = _chunkZ7BVK32Ccjs.TOOL_BRIDGE_PROTOCOL; exports.TOOL_DISCOVERY_TOOLS = _chunkZ7BVK32Ccjs.TOOL_DISCOVERY_TOOLS; exports.TOOL_NAMESPACE_SEPARATOR = _chunkZ7BVK32Ccjs.TOOL_NAMESPACE_SEPARATOR; exports.ToolRegistry = _chunkZ7BVK32Ccjs.ToolRegistry; exports.ToolRegistryError = _chunkZ7BVK32Ccjs.ToolRegistryError; exports.ToolRegistryView = _chunkZ7BVK32Ccjs.ToolRegistryView; exports.UNSAFE_JSON_KEYS = _chunk2BSBFBOAcjs.UNSAFE_JSON_KEYS; exports.baseToolName = _chunkZ7BVK32Ccjs.baseToolName; exports.callEvalTool = _chunkVXLYEYP4cjs.callEvalTool; exports.captureInputSchema = _chunkN2FGYZ4Qcjs.captureInputSchema; exports.captureOutputSize = _chunkN2FGYZ4Qcjs.captureOutputSize; exports.cloneElementWithStyles = _chunkSVFEVKLFcjs.cloneElementWithStyles; exports.connectToolBridge = _chunkZ7BVK32Ccjs.connectToolBridge; exports.createAgentPlayback = _chunk3SLBXKAWcjs.createAgentPlayback; exports.createCanvasComponentToolProvider = createCanvasComponentToolProvider; exports.createCaptureTool = _chunkN2FGYZ4Qcjs.createCaptureTool; exports.createCaptureToolProvider = _chunkN2FGYZ4Qcjs.createCaptureToolProvider; exports.createDocumentChartTools = createDocumentChartTools; exports.createEditorMcpToolProvider = createEditorMcpToolProvider; exports.createElementCaptureSurface = _chunkSVFEVKLFcjs.createElementCaptureSurface; exports.createInstantPresenceClock = _chunkK7ENM55Pcjs.createInstantPresenceClock; exports.createMcpServer = _chunkZ7BVK32Ccjs.createMcpServer; exports.createPlaybackToolProvider = _chunk3SLBXKAWcjs.createPlaybackToolProvider; exports.createRichTextToolProvider = createRichTextToolProvider; exports.createSpreadsheetToolProvider = createSpreadsheetToolProvider; exports.createStyleResolver = _chunkVXLYEYP4cjs.createStyleResolver; exports.createStyleToolProvider = _chunkVXLYEYP4cjs.createStyleToolProvider; exports.createToolRegistry = _chunkZ7BVK32Ccjs.createToolRegistry; exports.derivePlaybackSteps = _chunk3SLBXKAWcjs.derivePlaybackSteps; exports.elementToSvg = _chunkSVFEVKLFcjs.elementToSvg; exports.errorResult = _chunkZ7BVK32Ccjs.errorResult; exports.failedEvalChecks = _chunkVXLYEYP4cjs.failedEvalChecks; exports.imageEvalFixturePixels = _chunkVXLYEYP4cjs.imageEvalFixturePixels; exports.isUnsafeJsonKey = _chunk2BSBFBOAcjs.isUnsafeJsonKey; exports.listSkillEvals = _chunkVXLYEYP4cjs.listSkillEvals; exports.listSkills = _chunkZ7BVK32Ccjs.listSkills; exports.locatePlaybackChrome = _chunk3SLBXKAWcjs.locatePlaybackChrome; exports.matchesEvalExpectation = _chunkVXLYEYP4cjs.matchesEvalExpectation; exports.memoryStyleStore = _chunkVXLYEYP4cjs.memoryStyleStore; exports.normalizeSide = normalizeSide; exports.parseSkillFrontmatter = _chunkZ7BVK32Ccjs.parseSkillFrontmatter; exports.parseStyleDomains = _chunkVXLYEYP4cjs.parseStyleDomains; exports.planAgentCommand = planAgentCommand; exports.planCanvasPlaybackSteps = planCanvasPlaybackSteps; exports.planCanvasToolPlayback = planCanvasToolPlayback; exports.planToolCall = planToolCall; exports.playbackRectFromClient = _chunk3SLBXKAWcjs.playbackRectFromClient; exports.playbackRefsFromArgs = _chunk3SLBXKAWcjs.playbackRefsFromArgs; exports.playbackRefsFromResult = _chunk3SLBXKAWcjs.playbackRefsFromResult; exports.rasterizeElement = _chunkSVFEVKLFcjs.rasterizeElement; exports.readSkillFile = _chunkZ7BVK32Ccjs.readSkillFile; exports.readingTime = _chunk3SLBXKAWcjs.readingTime; exports.realPresenceClock = _chunkK7ENM55Pcjs.realPresenceClock; exports.renderStyle = _chunkVXLYEYP4cjs.renderStyle; exports.resolveCaptureRequest = _chunkN2FGYZ4Qcjs.resolveCaptureRequest; exports.runStyleChecks = _chunkVXLYEYP4cjs.runStyleChecks; exports.runToolScript = _chunkVXLYEYP4cjs.runToolScript; exports.searchTokens = _chunkZ7BVK32Ccjs.searchTokens; exports.searchTools = _chunkZ7BVK32Ccjs.searchTools; exports.stripPrototypeKeys = _chunk2BSBFBOAcjs.stripPrototypeKeys; exports.summarize = _chunkZ7BVK32Ccjs.summarize; exports.toCapturedImageData = _chunkN2FGYZ4Qcjs.toCapturedImageData; exports.toToolResult = _chunkZ7BVK32Ccjs.toToolResult; exports.toolCallToAgentCommand = toolCallToAgentCommand; exports.toolResultError = _chunkVXLYEYP4cjs.toolResultError; exports.toolResultValue = _chunkVXLYEYP4cjs.toolResultValue; exports.toolsetInstructions = _chunkZ7BVK32Ccjs.toolsetInstructions; exports.toolsetName = _chunkZ7BVK32Ccjs.toolsetName; exports.trackPresenceDrag = _chunkK7ENM55Pcjs.trackPresenceDrag; exports.tweenPresenceCursor = _chunkK7ENM55Pcjs.tweenPresenceCursor; exports.unionCaptureRects = _chunkN2FGYZ4Qcjs.unionCaptureRects; exports.unionRects = _chunk3SLBXKAWcjs.unionRects; exports.unknownToolMessage = _chunkZ7BVK32Ccjs.unknownToolMessage; exports.validateAgentCommand = validateAgentCommand; exports.validateJsonSchema = _chunkWOFXZ3XUcjs.validateJsonSchema;
|
package/dist/agent/index.js
CHANGED
|
@@ -100,7 +100,11 @@ function matchesEvalExpectation(actual, expected) {
|
|
|
100
100
|
return !!list && matches(list.map((row) => Array.isArray(row) ? row[index] : void 0), m);
|
|
101
101
|
}
|
|
102
102
|
case "$expr":
|
|
103
|
-
|
|
103
|
+
try {
|
|
104
|
+
return !!new Function("v", `return (${want});`)(actual);
|
|
105
|
+
} catch {
|
|
106
|
+
return false;
|
|
107
|
+
}
|
|
104
108
|
case "$nonEmpty":
|
|
105
109
|
return !!list && matches(list.filter((a) => !isEmpty(a)), want);
|
|
106
110
|
default:
|
|
@@ -100,7 +100,11 @@ function matchesEvalExpectation(actual, expected) {
|
|
|
100
100
|
return !!list && matches(list.map((row) => Array.isArray(row) ? row[index] : void 0), m);
|
|
101
101
|
}
|
|
102
102
|
case "$expr":
|
|
103
|
-
|
|
103
|
+
try {
|
|
104
|
+
return !!new Function("v", `return (${want});`)(actual);
|
|
105
|
+
} catch (e2) {
|
|
106
|
+
return false;
|
|
107
|
+
}
|
|
104
108
|
case "$nonEmpty":
|
|
105
109
|
return !!list && matches(list.filter((a) => !isEmpty(a)), want);
|
|
106
110
|
default:
|
|
@@ -126,7 +130,7 @@ function toolResultValue(result) {
|
|
|
126
130
|
if (!_optionalChain([text, 'optionalAccess', _4 => _4.text])) return void 0;
|
|
127
131
|
try {
|
|
128
132
|
return JSON.parse(text.text);
|
|
129
|
-
} catch (
|
|
133
|
+
} catch (e3) {
|
|
130
134
|
return text.text;
|
|
131
135
|
}
|
|
132
136
|
}
|
package/dist/tools/index.cjs
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
|
|
16
|
-
var
|
|
16
|
+
var _chunkVXLYEYP4cjs = require('../chunk-VXLYEYP4.cjs');
|
|
17
17
|
|
|
18
18
|
|
|
19
19
|
|
|
@@ -199,4 +199,4 @@ var _chunk2BSBFBOAcjs = require('../chunk-2BSBFBOA.cjs');
|
|
|
199
199
|
|
|
200
200
|
|
|
201
201
|
|
|
202
|
-
exports.AgentPlayback = _chunk3SLBXKAWcjs.AgentPlayback; exports.CAPTURE_EXCLUDE_SELECTOR = _chunkSVFEVKLFcjs.CAPTURE_EXCLUDE_SELECTOR; exports.CAPTURE_OVERLAY_SELECTORS = _chunkSVFEVKLFcjs.CAPTURE_OVERLAY_SELECTORS; exports.EDITOR_CANVAS_TOOLS = _chunkSVFEVKLFcjs.EDITOR_CANVAS_TOOLS; exports.EDITOR_MCP_TOOLS = _chunkSVFEVKLFcjs.EDITOR_MCP_TOOLS; exports.EDITOR_PROMPT_TOOLS = _chunkSVFEVKLFcjs.EDITOR_PROMPT_TOOLS; exports.EDIT_OPERATION_REQUIRED_ARGUMENTS = _chunkSVFEVKLFcjs.EDIT_OPERATION_REQUIRED_ARGUMENTS; exports.EXPORT_EXCLUDED_SELECTORS = _chunkSVFEVKLFcjs.EXPORT_EXCLUDED_SELECTORS; exports.JSON_RPC_ERRORS = _chunkZ7BVK32Ccjs.JSON_RPC_ERRORS; exports.MCP_PROTOCOL_VERSIONS = _chunkZ7BVK32Ccjs.MCP_PROTOCOL_VERSIONS; exports.MCP_TOOL_CANVAS_ADD_NODE = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_ADD_NODE; exports.MCP_TOOL_CANVAS_CONNECT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_CONNECT; exports.MCP_TOOL_CANVAS_HIGHLIGHT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_HIGHLIGHT; exports.MCP_TOOL_CANVAS_LAYOUT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_LAYOUT; exports.MCP_TOOL_CANVAS_REMOVE_NODES = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_REMOVE_NODES; exports.MCP_TOOL_CANVAS_SELECT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_SELECT; exports.MCP_TOOL_CANVAS_UPDATE_NODE = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_UPDATE_NODE; exports.MCP_TOOL_EDIT_CANVAS = _chunkSVFEVKLFcjs.MCP_TOOL_EDIT_CANVAS; exports.MCP_TOOL_EDIT_PROMPT = _chunkSVFEVKLFcjs.MCP_TOOL_EDIT_PROMPT; exports.MCP_TOOL_GET_EDITOR_STATE = _chunkSVFEVKLFcjs.MCP_TOOL_GET_EDITOR_STATE; exports.MCP_TOOL_PROMPT_INSERT_TEXT = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_INSERT_TEXT; exports.MCP_TOOL_PROMPT_REPLACE_RANGE = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_REPLACE_RANGE; exports.MCP_TOOL_PROMPT_SELECT = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_SELECT; exports.MCP_TOOL_PROMPT_SET_VARIABLE = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_SET_VARIABLE; exports.MCP_TOOL_VIEW_EDITOR = _chunkSVFEVKLFcjs.MCP_TOOL_VIEW_EDITOR; exports.PRESENCE_COLORS = _chunkK7ENM55Pcjs.PRESENCE_COLORS; exports.PerformanceQueue = _chunkK7ENM55Pcjs.PerformanceQueue; exports.PresenceStore = _chunkK7ENM55Pcjs.PresenceStore; exports.TOOL_BRIDGE_DEFAULT_PORT = _chunkZ7BVK32Ccjs.TOOL_BRIDGE_DEFAULT_PORT; exports.TOOL_BRIDGE_PROTOCOL = _chunkZ7BVK32Ccjs.TOOL_BRIDGE_PROTOCOL; exports.TOOL_DISCOVERY_TOOLS = _chunkZ7BVK32Ccjs.TOOL_DISCOVERY_TOOLS; exports.TOOL_NAMESPACE_SEPARATOR = _chunkZ7BVK32Ccjs.TOOL_NAMESPACE_SEPARATOR; exports.ToolRegistry = _chunkZ7BVK32Ccjs.ToolRegistry; exports.ToolRegistryError = _chunkZ7BVK32Ccjs.ToolRegistryError; exports.ToolRegistryView = _chunkZ7BVK32Ccjs.ToolRegistryView; exports.UNSAFE_JSON_KEYS = _chunk2BSBFBOAcjs.UNSAFE_JSON_KEYS; exports.baseToolName = _chunkZ7BVK32Ccjs.baseToolName; exports.callEvalTool =
|
|
202
|
+
exports.AgentPlayback = _chunk3SLBXKAWcjs.AgentPlayback; exports.CAPTURE_EXCLUDE_SELECTOR = _chunkSVFEVKLFcjs.CAPTURE_EXCLUDE_SELECTOR; exports.CAPTURE_OVERLAY_SELECTORS = _chunkSVFEVKLFcjs.CAPTURE_OVERLAY_SELECTORS; exports.EDITOR_CANVAS_TOOLS = _chunkSVFEVKLFcjs.EDITOR_CANVAS_TOOLS; exports.EDITOR_MCP_TOOLS = _chunkSVFEVKLFcjs.EDITOR_MCP_TOOLS; exports.EDITOR_PROMPT_TOOLS = _chunkSVFEVKLFcjs.EDITOR_PROMPT_TOOLS; exports.EDIT_OPERATION_REQUIRED_ARGUMENTS = _chunkSVFEVKLFcjs.EDIT_OPERATION_REQUIRED_ARGUMENTS; exports.EXPORT_EXCLUDED_SELECTORS = _chunkSVFEVKLFcjs.EXPORT_EXCLUDED_SELECTORS; exports.JSON_RPC_ERRORS = _chunkZ7BVK32Ccjs.JSON_RPC_ERRORS; exports.MCP_PROTOCOL_VERSIONS = _chunkZ7BVK32Ccjs.MCP_PROTOCOL_VERSIONS; exports.MCP_TOOL_CANVAS_ADD_NODE = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_ADD_NODE; exports.MCP_TOOL_CANVAS_CONNECT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_CONNECT; exports.MCP_TOOL_CANVAS_HIGHLIGHT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_HIGHLIGHT; exports.MCP_TOOL_CANVAS_LAYOUT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_LAYOUT; exports.MCP_TOOL_CANVAS_REMOVE_NODES = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_REMOVE_NODES; exports.MCP_TOOL_CANVAS_SELECT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_SELECT; exports.MCP_TOOL_CANVAS_UPDATE_NODE = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_UPDATE_NODE; exports.MCP_TOOL_EDIT_CANVAS = _chunkSVFEVKLFcjs.MCP_TOOL_EDIT_CANVAS; exports.MCP_TOOL_EDIT_PROMPT = _chunkSVFEVKLFcjs.MCP_TOOL_EDIT_PROMPT; exports.MCP_TOOL_GET_EDITOR_STATE = _chunkSVFEVKLFcjs.MCP_TOOL_GET_EDITOR_STATE; exports.MCP_TOOL_PROMPT_INSERT_TEXT = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_INSERT_TEXT; exports.MCP_TOOL_PROMPT_REPLACE_RANGE = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_REPLACE_RANGE; exports.MCP_TOOL_PROMPT_SELECT = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_SELECT; exports.MCP_TOOL_PROMPT_SET_VARIABLE = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_SET_VARIABLE; exports.MCP_TOOL_VIEW_EDITOR = _chunkSVFEVKLFcjs.MCP_TOOL_VIEW_EDITOR; exports.PRESENCE_COLORS = _chunkK7ENM55Pcjs.PRESENCE_COLORS; exports.PerformanceQueue = _chunkK7ENM55Pcjs.PerformanceQueue; exports.PresenceStore = _chunkK7ENM55Pcjs.PresenceStore; exports.TOOL_BRIDGE_DEFAULT_PORT = _chunkZ7BVK32Ccjs.TOOL_BRIDGE_DEFAULT_PORT; exports.TOOL_BRIDGE_PROTOCOL = _chunkZ7BVK32Ccjs.TOOL_BRIDGE_PROTOCOL; exports.TOOL_DISCOVERY_TOOLS = _chunkZ7BVK32Ccjs.TOOL_DISCOVERY_TOOLS; exports.TOOL_NAMESPACE_SEPARATOR = _chunkZ7BVK32Ccjs.TOOL_NAMESPACE_SEPARATOR; exports.ToolRegistry = _chunkZ7BVK32Ccjs.ToolRegistry; exports.ToolRegistryError = _chunkZ7BVK32Ccjs.ToolRegistryError; exports.ToolRegistryView = _chunkZ7BVK32Ccjs.ToolRegistryView; exports.UNSAFE_JSON_KEYS = _chunk2BSBFBOAcjs.UNSAFE_JSON_KEYS; exports.baseToolName = _chunkZ7BVK32Ccjs.baseToolName; exports.callEvalTool = _chunkVXLYEYP4cjs.callEvalTool; exports.captureInputSchema = _chunkN2FGYZ4Qcjs.captureInputSchema; exports.captureOutputSize = _chunkN2FGYZ4Qcjs.captureOutputSize; exports.cloneElementWithStyles = _chunkSVFEVKLFcjs.cloneElementWithStyles; exports.connectToolBridge = _chunkZ7BVK32Ccjs.connectToolBridge; exports.createAgentPlayback = _chunk3SLBXKAWcjs.createAgentPlayback; exports.createCaptureTool = _chunkN2FGYZ4Qcjs.createCaptureTool; exports.createCaptureToolProvider = _chunkN2FGYZ4Qcjs.createCaptureToolProvider; exports.createElementCaptureSurface = _chunkSVFEVKLFcjs.createElementCaptureSurface; exports.createInstantPresenceClock = _chunkK7ENM55Pcjs.createInstantPresenceClock; exports.createMcpServer = _chunkZ7BVK32Ccjs.createMcpServer; exports.createPlaybackToolProvider = _chunk3SLBXKAWcjs.createPlaybackToolProvider; exports.createStyleResolver = _chunkVXLYEYP4cjs.createStyleResolver; exports.createStyleToolProvider = _chunkVXLYEYP4cjs.createStyleToolProvider; exports.createToolRegistry = _chunkZ7BVK32Ccjs.createToolRegistry; exports.derivePlaybackSteps = _chunk3SLBXKAWcjs.derivePlaybackSteps; exports.elementToSvg = _chunkSVFEVKLFcjs.elementToSvg; exports.errorResult = _chunkZ7BVK32Ccjs.errorResult; exports.failedEvalChecks = _chunkVXLYEYP4cjs.failedEvalChecks; exports.imageEvalFixturePixels = _chunkVXLYEYP4cjs.imageEvalFixturePixels; exports.isUnsafeJsonKey = _chunk2BSBFBOAcjs.isUnsafeJsonKey; exports.listSkillEvals = _chunkVXLYEYP4cjs.listSkillEvals; exports.listSkills = _chunkZ7BVK32Ccjs.listSkills; exports.locatePlaybackChrome = _chunk3SLBXKAWcjs.locatePlaybackChrome; exports.matchesEvalExpectation = _chunkVXLYEYP4cjs.matchesEvalExpectation; exports.memoryStyleStore = _chunkVXLYEYP4cjs.memoryStyleStore; exports.parseSkillFrontmatter = _chunkZ7BVK32Ccjs.parseSkillFrontmatter; exports.parseStyleDomains = _chunkVXLYEYP4cjs.parseStyleDomains; exports.playbackRectFromClient = _chunk3SLBXKAWcjs.playbackRectFromClient; exports.playbackRefsFromArgs = _chunk3SLBXKAWcjs.playbackRefsFromArgs; exports.playbackRefsFromResult = _chunk3SLBXKAWcjs.playbackRefsFromResult; exports.rasterizeElement = _chunkSVFEVKLFcjs.rasterizeElement; exports.readSkillFile = _chunkZ7BVK32Ccjs.readSkillFile; exports.readingTime = _chunk3SLBXKAWcjs.readingTime; exports.realPresenceClock = _chunkK7ENM55Pcjs.realPresenceClock; exports.renderStyle = _chunkVXLYEYP4cjs.renderStyle; exports.resolveCaptureRequest = _chunkN2FGYZ4Qcjs.resolveCaptureRequest; exports.runStyleChecks = _chunkVXLYEYP4cjs.runStyleChecks; exports.runToolScript = _chunkVXLYEYP4cjs.runToolScript; exports.searchTokens = _chunkZ7BVK32Ccjs.searchTokens; exports.searchTools = _chunkZ7BVK32Ccjs.searchTools; exports.stripPrototypeKeys = _chunk2BSBFBOAcjs.stripPrototypeKeys; exports.summarize = _chunkZ7BVK32Ccjs.summarize; exports.toCapturedImageData = _chunkN2FGYZ4Qcjs.toCapturedImageData; exports.toToolResult = _chunkZ7BVK32Ccjs.toToolResult; exports.toolResultError = _chunkVXLYEYP4cjs.toolResultError; exports.toolResultValue = _chunkVXLYEYP4cjs.toolResultValue; exports.toolsetInstructions = _chunkZ7BVK32Ccjs.toolsetInstructions; exports.toolsetName = _chunkZ7BVK32Ccjs.toolsetName; exports.trackPresenceDrag = _chunkK7ENM55Pcjs.trackPresenceDrag; exports.tweenPresenceCursor = _chunkK7ENM55Pcjs.tweenPresenceCursor; exports.unionCaptureRects = _chunkN2FGYZ4Qcjs.unionCaptureRects; exports.unionRects = _chunk3SLBXKAWcjs.unionRects; exports.unknownToolMessage = _chunkZ7BVK32Ccjs.unknownToolMessage; exports.validateJsonSchema = _chunkWOFXZ3XUcjs.validateJsonSchema;
|
package/dist/tools/index.js
CHANGED
|
@@ -20,7 +20,7 @@ export interface SkillEvalCheck extends SkillEvalToolCall {
|
|
|
20
20
|
}
|
|
21
21
|
export interface SkillEval {
|
|
22
22
|
prompt: string;
|
|
23
|
-
fixture: SpreadsheetEvalFixture | ImageEvalFixture | VectorEvalFixture | PaintEvalFixture | VideoEvalFixture | ChartEvalFixture;
|
|
23
|
+
fixture: SpreadsheetEvalFixture | ImageEvalFixture | VectorEvalFixture | PaintEvalFixture | VideoEvalFixture | ChartEvalFixture | DiagramEvalFixture;
|
|
24
24
|
checks: SkillEvalCheck[];
|
|
25
25
|
solution: SkillEvalToolCall[];
|
|
26
26
|
}
|
|
@@ -72,6 +72,11 @@ export interface ChartEvalFixture {
|
|
|
72
72
|
/** Tool calls that build the starting chart (`set_chart_data`, `update_chart`), run in order. */
|
|
73
73
|
setup?: SkillEvalToolCall[];
|
|
74
74
|
}
|
|
75
|
+
export interface DiagramEvalFixture {
|
|
76
|
+
editor: 'diagram';
|
|
77
|
+
/** Tool calls that build the starting diagram (`load_diagram_mermaid`), run in order. */
|
|
78
|
+
setup?: SkillEvalToolCall[];
|
|
79
|
+
}
|
|
75
80
|
/** One eval file of a skill. */
|
|
76
81
|
export interface SkillEvalFile {
|
|
77
82
|
skill: string;
|
|
@@ -20,7 +20,7 @@ export interface SkillEvalCheck extends SkillEvalToolCall {
|
|
|
20
20
|
}
|
|
21
21
|
export interface SkillEval {
|
|
22
22
|
prompt: string;
|
|
23
|
-
fixture: SpreadsheetEvalFixture | ImageEvalFixture | VectorEvalFixture | PaintEvalFixture | VideoEvalFixture | ChartEvalFixture;
|
|
23
|
+
fixture: SpreadsheetEvalFixture | ImageEvalFixture | VectorEvalFixture | PaintEvalFixture | VideoEvalFixture | ChartEvalFixture | DiagramEvalFixture;
|
|
24
24
|
checks: SkillEvalCheck[];
|
|
25
25
|
solution: SkillEvalToolCall[];
|
|
26
26
|
}
|
|
@@ -72,6 +72,11 @@ export interface ChartEvalFixture {
|
|
|
72
72
|
/** Tool calls that build the starting chart (`set_chart_data`, `update_chart`), run in order. */
|
|
73
73
|
setup?: SkillEvalToolCall[];
|
|
74
74
|
}
|
|
75
|
+
export interface DiagramEvalFixture {
|
|
76
|
+
editor: 'diagram';
|
|
77
|
+
/** Tool calls that build the starting diagram (`load_diagram_mermaid`), run in order. */
|
|
78
|
+
setup?: SkillEvalToolCall[];
|
|
79
|
+
}
|
|
75
80
|
/** One eval file of a skill. */
|
|
76
81
|
export interface SkillEvalFile {
|
|
77
82
|
skill: string;
|
package/package.json
CHANGED
package/skills/README.md
CHANGED
|
@@ -55,6 +55,10 @@ request like "clean up this export" finds it.
|
|
|
55
55
|
| [`pixerate-video-montage`](pixerate-video-montage/SKILL.md) | Video (`pixerate-video-editor`) | Selects on the beat, varied pacing, short transitions with handles, music under everything and a clean ending. |
|
|
56
56
|
| [`pixerate-chart-choose-and-build`](pixerate-chart-choose-and-build/SKILL.md) | Chart (`pixerate-chart`) | From the question to the type, clean ordered data, honest axes, units and colour-blind-safe colours. |
|
|
57
57
|
| [`pixerate-chart-annotate`](pixerate-chart-annotate/SKILL.md) | Chart (`pixerate-chart`) | A takeaway title, highlights, labelled targets and ranges, callouts and a source note, kept few. |
|
|
58
|
+
| [`pixerate-spreadsheet-analysis`](pixerate-spreadsheet-analysis/SKILL.md) | Spreadsheet (`pixerate-spreadsheet`) | Summary tables with SUMIFS, COUNTIFS and AVERAGEIFS, growth, shares and rankings as live formulas that reconcile with the data. |
|
|
59
|
+
| [`pixerate-spreadsheet-financial-model`](pixerate-spreadsheet-financial-model/SKILL.md) | Spreadsheet (`pixerate-spreadsheet`) | Inputs apart from calculations, one formula pattern per row, no hard-coded numbers, scenarios and audits. |
|
|
60
|
+
| [`pixerate-diagram-process-flow`](pixerate-diagram-process-flow/SKILL.md) | Diagram (`pixerate-diagram`) | Processes as flowcharts: terminals, verb steps, decisions with labelled exits, loops and swimlanes. |
|
|
61
|
+
| [`pixerate-diagram-architecture`](pixerate-diagram-architecture/SKILL.md) | Diagram (`pixerate-diagram`) | Systems at one level of detail, store shapes, tiers and trust boundaries, flows labelled with protocols. |
|
|
58
62
|
| [`pixerate-talking-head-edit`](pixerate-talking-head-edit/SKILL.md) | Video (`pixerate-video-editor`) | Talking-head cleanup by transcript: fillers, long pauses and stutters found in one pass and cut as one plan reviewed before it applies. Owns the dialogue tools. |
|
|
59
63
|
| [`pixerate-bgm-alignment`](pixerate-bgm-alignment/SKILL.md) | Video (`pixerate-video-editor`) | Background music: beats and cuts on the beat, ducking under speech, loudness in LUFS. Owns the music tools. |
|
|
60
64
|
|
|
@@ -120,7 +124,7 @@ same change.
|
|
|
120
124
|
`{ "editor": "image", "width", "height", "background", "shapes" }` or `{ "editor":
|
|
121
125
|
"vector", "width", "height", "setup" }` with commands that draw the starting art,
|
|
122
126
|
`{ "editor": "paint", "width", "height", "setup" }` `{ "editor": "video", "setup" }` or `{ "editor":
|
|
123
|
-
"chart", "setup" }` with tool calls), `checks` (a read-only
|
|
127
|
+
"chart", "setup" }` or `{ "editor": "diagram", "setup" }` with tool calls), `checks` (a read-only
|
|
124
128
|
tool, or `run_command` with a read-only command such as `vector.list`, its `args`, what its result must match in `expect`, and `why`) and a `solution` (the
|
|
125
129
|
tool calls an expert would make). The test proves each eval: some check fails on the fixture,
|
|
126
130
|
and all pass after the solution. A model harness runs the same file with the model in place
|
|
@@ -24,6 +24,14 @@ Read `pixerate-agent-tools` first for tool naming, errors and batching. Data cha
|
|
|
24
24
|
line, pie with styling, trendlines) belong in the chart editor (`pixerate-chart`); Mermaid
|
|
25
25
|
`xychart-beta`, `pie` and `radar-beta` text can move between the two.
|
|
26
26
|
|
|
27
|
+
## Workflow skills
|
|
28
|
+
|
|
29
|
+
For these jobs, load the workflow skill too: it has the method, the checks between steps and
|
|
30
|
+
the pitfalls, and uses the tools below.
|
|
31
|
+
|
|
32
|
+
- `pixerate-diagram-process-flow`: processes, decisions with labelled exits, loops and swimlanes.
|
|
33
|
+
- `pixerate-diagram-architecture`: systems, tiers and trust boundaries, flows labelled with protocols.
|
|
34
|
+
|
|
27
35
|
## Working method
|
|
28
36
|
|
|
29
37
|
1. **Read.** `get_diagram` (with `includeSource: true` when you need the text). Note the
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: pixerate-diagram-architecture
|
|
3
|
+
description: The architecture diagram workflow in the Pixerate diagram editor - drawing systems, services, data stores and external actors with consistent shapes, grouping them into tiers, environments and trust boundaries, labelling data flows with protocols and direction, choosing between a flowchart, C4 and architecture family, and keeping the diagram at one level of detail. Use when asked to draw or document a system, software, cloud, network, infrastructure, deployment or service architecture, a C4 context or container diagram, data flows or trust boundaries, or when load_diagram_mermaid, group_diagram_nodes or set_diagram_edge_label are available. Load with pixerate-diagram, which lists every tool.
|
|
4
|
+
metadata:
|
|
5
|
+
kind: workflow
|
|
6
|
+
reference: pixerate-diagram
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# Drawing an architecture
|
|
10
|
+
|
|
11
|
+
An architecture diagram shows what the parts of a system are, how they are grouped and how data
|
|
12
|
+
moves between them, at one level of detail. Users and external systems sit at the edge; tiers,
|
|
13
|
+
environments and trust boundaries are groups; every arrow is a flow labelled with what moves
|
|
14
|
+
over it and how (HTTPS, SQL, events).
|
|
15
|
+
|
|
16
|
+
This skill is the method. `pixerate-diagram` has the full tool reference.
|
|
17
|
+
|
|
18
|
+
## Goal and quality bar
|
|
19
|
+
|
|
20
|
+
- One level of detail: a context view (people and systems), a container view (apps, services,
|
|
21
|
+
stores) or a deployment view (servers, networks); not all at once.
|
|
22
|
+
- Consistent shapes: data stores as `cyl`, people and external actors distinguishable from
|
|
23
|
+
internal services, queues and documents with their own shape.
|
|
24
|
+
- Groups for tiers, environments and trust boundaries, labelled ("App tier", "Private
|
|
25
|
+
network").
|
|
26
|
+
- Every flow points the way data moves and is labelled with its protocol or content.
|
|
27
|
+
- Direction `LR` for request flows (user on the left, data on the right), `TB` for layered
|
|
28
|
+
stacks.
|
|
29
|
+
|
|
30
|
+
## Inputs to confirm
|
|
31
|
+
|
|
32
|
+
- **Scope and level:** the whole system or one part; context, container or deployment.
|
|
33
|
+
- **The parts**, their kinds (service, store, queue, external) and how they talk.
|
|
34
|
+
- **Boundaries** that matter: public versus private, regions, accounts, teams.
|
|
35
|
+
|
|
36
|
+
## Working method
|
|
37
|
+
|
|
38
|
+
1. **Read.** `get_diagram` for anything existing; note ids and groups.
|
|
39
|
+
2. **List the parts and flows** at one level: actors, services, stores, external systems; each
|
|
40
|
+
flow with source, target and protocol.
|
|
41
|
+
3. **Choose the family.** A `flowchart` with subgraphs suits most system sketches; `C4Context` /
|
|
42
|
+
`C4Container` when the user asks for C4; `architecture-beta` for cloud icons and groups.
|
|
43
|
+
4. **Write it** with `load_diagram_mermaid`: nodes with shapes, `subgraph` groups, labelled
|
|
44
|
+
edges (`app1 -->|SQL| db`).
|
|
45
|
+
**Check:** `get_diagram`: store shapes, groups and each node's `parentId`, every edge's
|
|
46
|
+
`label`.
|
|
47
|
+
5. **Boundaries.** `group_diagram_nodes` for tiers and trust boundaries in an existing diagram.
|
|
48
|
+
**Check:** components sit in the right group; nothing internal is left outside.
|
|
49
|
+
6. **Label flows.** `set_diagram_edge_label` with the protocol or content on each edge.
|
|
50
|
+
**Check:** no edge without a label (other than obvious containment).
|
|
51
|
+
7. **Look.** `render_diagram`: arrows crossing groups, crowded tiers, long labels.
|
|
52
|
+
|
|
53
|
+
## Decision table
|
|
54
|
+
|
|
55
|
+
| Part | Shape |
|
|
56
|
+
| --- | --- |
|
|
57
|
+
| Service, app, API | `rect` (or `rounded`) |
|
|
58
|
+
| Database, data store | `cyl` |
|
|
59
|
+
| Queue, stream | `h-cyl` or `lin-cyl` |
|
|
60
|
+
| File, document, report | `doc` |
|
|
61
|
+
| Person, external actor | `stadium` or `circle`, outside the system's group |
|
|
62
|
+
| External system | `rect` with a dashed style, or its own group |
|
|
63
|
+
| Tier, environment, boundary | `subgraph` via `group_diagram_nodes` |
|
|
64
|
+
|
|
65
|
+
| Want | Family |
|
|
66
|
+
| --- | --- |
|
|
67
|
+
| A quick system sketch | `flowchart LR` with subgraphs |
|
|
68
|
+
| A C4 context or container view | `C4Context`, `C4Container` |
|
|
69
|
+
| Cloud services with icons and groups | `architecture-beta` |
|
|
70
|
+
| Calls over time between services | `sequenceDiagram` |
|
|
71
|
+
|
|
72
|
+
## Recipes
|
|
73
|
+
|
|
74
|
+
**Three-tier web app.** `load_diagram_mermaid` with `flowchart LR`, `browser[Browser] -->|HTTPS|
|
|
75
|
+
lb[Load balancer]`, a `subgraph app [App tier]` with `app1` and `app2`, `lb --> app1`,
|
|
76
|
+
`lb --> app2`, `app1 -->|SQL| db[(Database)]`, `app2 -->|SQL| db`.
|
|
77
|
+
|
|
78
|
+
**Trust boundaries.** `group_diagram_nodes` `{ nodeIds: ["browser"], label: "Public internet" }`
|
|
79
|
+
and `{ nodeIds: ["lb", "api", "db"], label: "Private network" }`.
|
|
80
|
+
|
|
81
|
+
**Protocols.** `set_diagram_edge_label` on each edge id from `get_diagram` (`L_browser_api_0` →
|
|
82
|
+
"HTTPS").
|
|
83
|
+
|
|
84
|
+
## Pitfalls
|
|
85
|
+
|
|
86
|
+
- **Mixed levels**: servers next to business capabilities next to classes confuse every reader.
|
|
87
|
+
- **Unlabelled arrows** hide what actually flows and over which protocol.
|
|
88
|
+
- **Two-way arrows everywhere**: draw the direction of the request or the data.
|
|
89
|
+
- **Databases as rectangles** lose the most recognised shape in the diagram.
|
|
90
|
+
- **Everything in one group** says nothing; boundaries should separate what differs (trust,
|
|
91
|
+
environment, ownership).
|
|
92
|
+
- **Crossing lines** across groups: reorder nodes or change direction.
|
|
93
|
+
|
|
94
|
+
## Tools used
|
|
95
|
+
|
|
96
|
+
- `get_diagram`, `render_diagram`: read and look
|
|
97
|
+
- `load_diagram_mermaid`: write the architecture in one call
|
|
98
|
+
- `add_diagram_node`, `connect_diagram_nodes`, `reconnect_diagram_edge`: change parts and flows
|
|
99
|
+
- `set_diagram_node_shape`, `set_diagram_node_style`, `rename_diagram_node`: shapes, styles and names
|
|
100
|
+
- `set_diagram_edge_label`: protocols on flows
|
|
101
|
+
- `group_diagram_nodes`, `ungroup_diagram_group`: tiers and boundaries
|
|
102
|
+
- `move_diagram_nodes`: canvas positions, to untangle crossing lines
|
|
103
|
+
- `set_diagram_direction`, `set_diagram_title`: layout and title
|
|
104
|
+
- `undo_diagram`: take back a step
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
{
|
|
2
|
+
"prompt": "Label the data flows with their protocols: HTTPS from the browser to the API, gRPC from the API to the worker, and SQL from both services to the database.",
|
|
3
|
+
"fixture": {
|
|
4
|
+
"editor": "diagram",
|
|
5
|
+
"setup": [
|
|
6
|
+
{
|
|
7
|
+
"tool": "load_diagram_mermaid",
|
|
8
|
+
"args": {
|
|
9
|
+
"source": "flowchart LR\n browser[Browser] --> api[API]\n api --> worker[Worker]\n api --> db[(Database)]\n worker --> db"
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
]
|
|
13
|
+
},
|
|
14
|
+
"checks": [
|
|
15
|
+
{
|
|
16
|
+
"why": "each flow labelled with its protocol",
|
|
17
|
+
"tool": "get_diagram",
|
|
18
|
+
"expect": {
|
|
19
|
+
"$expr": "(() => { const l = (s, t) => (v.edges.find((e) => e.source === s && e.target === t) || {}).label || ''; return /https/i.test(l('browser', 'api')) && /grpc/i.test(l('api', 'worker')) && /sql/i.test(l('api', 'db')) && /sql/i.test(l('worker', 'db')); })()"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"why": "no flows added or removed",
|
|
24
|
+
"tool": "get_diagram",
|
|
25
|
+
"expect": {
|
|
26
|
+
"edges": {
|
|
27
|
+
"$length": 4
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
],
|
|
32
|
+
"solution": [
|
|
33
|
+
{
|
|
34
|
+
"tool": "set_diagram_edge_label",
|
|
35
|
+
"args": {
|
|
36
|
+
"id": "L_browser_api_0",
|
|
37
|
+
"label": "HTTPS"
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"tool": "set_diagram_edge_label",
|
|
42
|
+
"args": {
|
|
43
|
+
"id": "L_api_worker_1",
|
|
44
|
+
"label": "gRPC"
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"tool": "set_diagram_edge_label",
|
|
49
|
+
"args": {
|
|
50
|
+
"id": "L_api_db_2",
|
|
51
|
+
"label": "SQL"
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"tool": "set_diagram_edge_label",
|
|
56
|
+
"args": {
|
|
57
|
+
"id": "L_worker_db_3",
|
|
58
|
+
"label": "SQL"
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
]
|
|
62
|
+
}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
{
|
|
2
|
+
"prompt": "Mark the trust boundaries: the browser is outside, on the public internet; everything else is in our private network.",
|
|
3
|
+
"fixture": {
|
|
4
|
+
"editor": "diagram",
|
|
5
|
+
"setup": [
|
|
6
|
+
{
|
|
7
|
+
"tool": "load_diagram_mermaid",
|
|
8
|
+
"args": {
|
|
9
|
+
"source": "flowchart LR\n browser[Browser] --> lb[Load balancer]\n lb --> api[API]\n api --> db[(Database)]"
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
]
|
|
13
|
+
},
|
|
14
|
+
"checks": [
|
|
15
|
+
{
|
|
16
|
+
"why": "a public and a private boundary",
|
|
17
|
+
"tool": "get_diagram",
|
|
18
|
+
"expect": {
|
|
19
|
+
"groups": {
|
|
20
|
+
"$some": {
|
|
21
|
+
"label": {
|
|
22
|
+
"$match": [
|
|
23
|
+
"public|internet",
|
|
24
|
+
"i"
|
|
25
|
+
]
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
"$expr": "v.some((g) => /private|internal/i.test(g.label))"
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"why": "the browser outside, the rest inside the private network",
|
|
34
|
+
"tool": "get_diagram",
|
|
35
|
+
"expect": {
|
|
36
|
+
"$expr": "(() => { const priv = v.groups.find((g) => /private|internal/i.test(g.label)).id; const p = (id) => v.nodes.find((n) => n.id === id).parentId; return p('browser') !== priv && ['lb', 'api', 'db'].every((id) => p(id) === priv); })()"
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
],
|
|
40
|
+
"solution": [
|
|
41
|
+
{
|
|
42
|
+
"tool": "group_diagram_nodes",
|
|
43
|
+
"args": {
|
|
44
|
+
"nodeIds": [
|
|
45
|
+
"browser"
|
|
46
|
+
],
|
|
47
|
+
"label": "Public internet",
|
|
48
|
+
"id": "public"
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"tool": "group_diagram_nodes",
|
|
53
|
+
"args": {
|
|
54
|
+
"nodeIds": [
|
|
55
|
+
"lb",
|
|
56
|
+
"api",
|
|
57
|
+
"db"
|
|
58
|
+
],
|
|
59
|
+
"label": "Private network",
|
|
60
|
+
"id": "private"
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
]
|
|
64
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
{
|
|
2
|
+
"prompt": "Draw the architecture of our web app: browsers talk to a load balancer, which spreads traffic over two app servers (group them as the app tier), and both servers use one database.",
|
|
3
|
+
"fixture": {
|
|
4
|
+
"editor": "diagram"
|
|
5
|
+
},
|
|
6
|
+
"checks": [
|
|
7
|
+
{
|
|
8
|
+
"why": "the database drawn as a database (cylinder)",
|
|
9
|
+
"tool": "get_diagram",
|
|
10
|
+
"expect": {
|
|
11
|
+
"nodes": {
|
|
12
|
+
"$some": {
|
|
13
|
+
"shape": {
|
|
14
|
+
"$in": [
|
|
15
|
+
"cyl",
|
|
16
|
+
"h-cyl",
|
|
17
|
+
"lin-cyl"
|
|
18
|
+
]
|
|
19
|
+
},
|
|
20
|
+
"label": {
|
|
21
|
+
"$match": [
|
|
22
|
+
"data|db",
|
|
23
|
+
"i"
|
|
24
|
+
]
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"why": "the two app servers grouped in an app tier",
|
|
32
|
+
"tool": "get_diagram",
|
|
33
|
+
"expect": {
|
|
34
|
+
"$expr": "(() => { const g = v.groups.find((x) => /app/i.test(x.label)); return !!g && v.nodes.filter((n) => n.parentId === g.id).length === 2; })()"
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"why": "the load balancer reaches both servers, and both reach the database",
|
|
39
|
+
"tool": "get_diagram",
|
|
40
|
+
"expect": {
|
|
41
|
+
"$expr": "(() => { const lb = v.nodes.find((n) => /balanc/i.test(n.label)); const db = v.nodes.find((n) => ['cyl', 'h-cyl', 'lin-cyl'].includes(n.shape)); const g = v.groups.find((x) => /app/i.test(x.label)); const servers = v.nodes.filter((n) => n.parentId === g.id); return servers.every((s) => v.edges.some((e) => e.source === lb.id && e.target === s.id) && v.edges.some((e) => e.source === s.id && e.target === db.id)); })()"
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
],
|
|
45
|
+
"solution": [
|
|
46
|
+
{
|
|
47
|
+
"tool": "load_diagram_mermaid",
|
|
48
|
+
"args": {
|
|
49
|
+
"source": "flowchart LR\n browser[Browser] -->|HTTPS| lb[Load balancer]\n subgraph app [App tier]\n app1[App server 1]\n app2[App server 2]\n end\n lb --> app1\n lb --> app2\n app1 -->|SQL| db[(Database)]\n app2 -->|SQL| db"
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"tool": "get_diagram"
|
|
54
|
+
}
|
|
55
|
+
]
|
|
56
|
+
}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: pixerate-diagram-process-flow
|
|
3
|
+
description: The process flow workflow in the Pixerate diagram editor - mapping a process as a Mermaid flowchart with one direction, terminals for start and end, verb-phrase steps, decisions as short questions with labelled exits, loops back to the right step, swimlanes for who does what, consistent shapes, and checking the result reads at its final size. Use when asked to draw, map, document or tidy a process, workflow, procedure, approval flow, decision tree, user flow or swimlane diagram, or when load_diagram_mermaid, add_diagram_node, connect_diagram_nodes or group_diagram_nodes are available. Load with pixerate-diagram, which lists every tool.
|
|
4
|
+
metadata:
|
|
5
|
+
kind: workflow
|
|
6
|
+
reference: pixerate-diagram
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# Mapping a process
|
|
10
|
+
|
|
11
|
+
A process flow answers "what happens next, and who does it?". It reads in one direction from a
|
|
12
|
+
single start to its end(s); every step is an action, every decision a question with labelled
|
|
13
|
+
answers, and loops go back to the step that repeats. Lanes show who does each step. Write a
|
|
14
|
+
new flow as one Mermaid text; change an existing one with the per-operation tools so the
|
|
15
|
+
user's formatting stays.
|
|
16
|
+
|
|
17
|
+
This skill is the method. `pixerate-diagram` has the full tool reference and the shapes.
|
|
18
|
+
|
|
19
|
+
## Goal and quality bar
|
|
20
|
+
|
|
21
|
+
- A `flowchart` in one direction: `LR` for a process that reads like a sentence, `TB` for a
|
|
22
|
+
decision tree or a long procedure.
|
|
23
|
+
- One start and clear ends as terminals (`stadium` or `rounded`); steps as `rect` with a verb
|
|
24
|
+
phrase ("Validate order"); decisions as `diam` with a short question ("Paid?").
|
|
25
|
+
- Every exit of a decision is labelled ("yes" / "no", or the outcome); conditions live on
|
|
26
|
+
edges, not inside nodes.
|
|
27
|
+
- Loops return to the step that repeats; no dead ends except the ends.
|
|
28
|
+
- Lanes (subgraphs) for who does what, when more than one actor is involved.
|
|
29
|
+
- Labels of at most five or six words; stable, readable ids (`validate`, `paid`).
|
|
30
|
+
|
|
31
|
+
## Inputs to confirm
|
|
32
|
+
|
|
33
|
+
- **Start and end:** what triggers the process and what counts as done (there may be several
|
|
34
|
+
ends: shipped, cancelled).
|
|
35
|
+
- **Actors** for lanes, if more than one.
|
|
36
|
+
- **Level of detail:** the happy path only, or every exception.
|
|
37
|
+
|
|
38
|
+
## Working method
|
|
39
|
+
|
|
40
|
+
1. **Read.** `get_diagram` (and `find_mermaid_diagrams` for Mermaid in the user's text).
|
|
41
|
+
**Check:** the family and the existing ids.
|
|
42
|
+
2. **List the steps and decisions** in order, with who does each, before writing.
|
|
43
|
+
3. **Write it.** New flow: one `load_diagram_mermaid` with the whole text (header, nodes with
|
|
44
|
+
shapes, edges with labels, `subgraph` lanes). Existing flow: `add_diagram_node` with `from`,
|
|
45
|
+
`connect_diagram_nodes`, `rename_diagram_node`, `set_diagram_node_shape`.
|
|
46
|
+
**Check:** the result's counts and `diagnostics`; `get_diagram` nodes, edges and groups.
|
|
47
|
+
4. **Decisions.** Each `diam` node has a question label and exactly the exits it needs, each
|
|
48
|
+
labelled (`set_diagram_edge_label`).
|
|
49
|
+
**Check:** every edge leaving a decision has a `label`.
|
|
50
|
+
5. **Lanes.** `group_diagram_nodes` per actor with a clear `label` ("Customer", "Shop").
|
|
51
|
+
**Check:** each node's `parentId` is its actor's lane.
|
|
52
|
+
6. **Look.** `render_diagram` once: crossings, long labels, crowding. Shorten labels, reorder,
|
|
53
|
+
or switch direction (`set_diagram_direction`) if it reads badly.
|
|
54
|
+
|
|
55
|
+
## Decision table
|
|
56
|
+
|
|
57
|
+
| Element | Shape and label |
|
|
58
|
+
| --- | --- |
|
|
59
|
+
| Start, end | `stadium` or `rounded`: "Order received", "Done" |
|
|
60
|
+
| Step | `rect`: a verb phrase |
|
|
61
|
+
| Decision | `diam`: a short question; labelled exits |
|
|
62
|
+
| Data store | `cyl` |
|
|
63
|
+
| Document produced | `doc` |
|
|
64
|
+
| Call into another process | `subproc` |
|
|
65
|
+
| Input or output | `lean-r` / `lean-l` |
|
|
66
|
+
| Several actors | `subgraph` lanes via `group_diagram_nodes` |
|
|
67
|
+
|
|
68
|
+
## Recipes
|
|
69
|
+
|
|
70
|
+
**A new flow.** `load_diagram_mermaid` with `source`: `flowchart LR` then
|
|
71
|
+
`start([Order received]) --> validate[Validate order]`, `validate --> paid{Paid?}`,
|
|
72
|
+
`paid -->|yes| ship[Ship order]`, `paid -->|no| remind[Send reminder]`, `remind --> paid`,
|
|
73
|
+
`ship --> done([Done])`.
|
|
74
|
+
|
|
75
|
+
**Swimlanes.** `group_diagram_nodes` `{ nodeIds: ["place", "pay"], label: "Customer" }` and
|
|
76
|
+
the same for each actor.
|
|
77
|
+
|
|
78
|
+
**Tidy a decision.** `rename_diagram_node` to a short question; `set_diagram_edge_label` on each
|
|
79
|
+
exit ("yes", "no").
|
|
80
|
+
|
|
81
|
+
## Pitfalls
|
|
82
|
+
|
|
83
|
+
- **Conditions inside the node** ("Paid? if yes ship") make the exits unreadable; label edges.
|
|
84
|
+
- **Unlabelled decision exits** leave the reader guessing which way is which.
|
|
85
|
+
- **Mixed directions** and long back-edges tangle the flow; keep one direction and short loops.
|
|
86
|
+
- **A shape for two meanings** (rect for steps and data) breaks the reader's legend.
|
|
87
|
+
- **Rewriting a user's diagram** with `load_diagram_mermaid` loses their formatting and comments;
|
|
88
|
+
use the per-operation tools for changes.
|
|
89
|
+
- **Too much detail**: exceptions for every step bury the main path; ask what level is wanted.
|
|
90
|
+
|
|
91
|
+
## Tools used
|
|
92
|
+
|
|
93
|
+
- `get_diagram`, `find_mermaid_diagrams`, `render_diagram`: read, find and look
|
|
94
|
+
- `load_diagram_mermaid`: write a new flow in one call
|
|
95
|
+
- `add_diagram_node`, `connect_diagram_nodes`, `remove_diagram_nodes`, `remove_diagram_edges`: change the flow
|
|
96
|
+
- `rename_diagram_node`, `set_diagram_node_shape`, `set_diagram_edge_label`: labels and shapes
|
|
97
|
+
- `group_diagram_nodes`, `ungroup_diagram_group`: lanes
|
|
98
|
+
- `set_diagram_direction`, `set_diagram_title`: layout and title
|
|
99
|
+
- `undo_diagram`: take back a step
|