diff --git a/skills/excalidraw-diagram/SKILL.md b/skills/excalidraw-diagram/SKILL.md new file mode 100644 index 00000000..34a14a7c --- /dev/null +++ b/skills/excalidraw-diagram/SKILL.md @@ -0,0 +1,167 @@ +--- +name: excalidraw-diagram +description: Generate Excalidraw diagrams from text content for Trilium Notes. Use when user asks to create diagrams, flowcharts, mind maps, or visual representations. Triggers on "Excalidraw", "Diagram", "Flowchart", "Mind Map", "Visualize". +metadata: + version: 1.1.0 +--- + +# Excalidraw Diagram Generator + +Create Excalidraw diagrams from text content and save them directly to Trilium Notes using the MCP tool. + +## Workflow + +1. **Analyze Content**: Identify concepts, relationships, and hierarchy in the user's request. +2. **Choose Diagram Type**: Select the appropriate visualization style (see guide below). +3. **Generate Excalidraw JSON**: Construct the complete, valid JSON data structure. +4. **Execute Tool**: Call the `create_note` function from `triliumnext-mcp`. + * `title`: A descriptive title. + * `content`: The complete Excalidraw JSON string. + * `type`: `canvas` + * `mime`: `application/json` + * and other input parameters if required. +5. **Notify User**: Confirm the note has been created in Trilium. + +## Diagram Types & Selection Guide + +Select the appropriate chart form to enhance understanding and visual appeal. + +| Type | Description | Usage Scenario | Approach | +| :--- | :--- | :--- | :--- | +| **Flowchart** | Step-by-step logic | Processes, workflows, task sequences | Connect steps with arrows to show direction. | +| **Mind Map** | Radiating concepts | Brainstorming, topic classification, ideas | Radiate outwards from a central core node. | +| **Hierarchy** | Organizational tree | Org charts, system breakdowns, taxonomies | Build nodes top-down or left-to-right. | +| **Relationship** | Network/Connection | Dependencies, interactions, influences | Use lines/arrows with labels to show how items relate. | +| **Comparison** | Side-by-side | Analyzing two or more options/views | Columns or tables comparing specific dimensions. | +| **Timeline** | Chronological | Project schedules, history, evolution | Use a time axis with milestones and events. | +| **Matrix** | Quadrant/Grid | 2-axis classification, prioritization | Plot items on X and Y axes (e.g., Eisenhower Matrix). | +| **Freeform** | Unstructured | Rough ideas, mood boards, loose collections | No structural limits; free placement of elements. | + +## Design Rules + +### Text & Format +* **Font Family**: All text elements must use `fontFamily: 5` (Excalidraw handwritten style). +* **Font Sizes**: + * Title: 24-28px + * Subtitle: 18-20px + * Body/Notes: 14-16px +* **Line Height**: Use `lineHeight: 1.25` for all text. +* **Sanitization**: Ensure all text within the JSON is properly escaped (e.g., escape double quotes `\"` inside the JSON string). + +### Layout & Design +* **Canvas Area**: Keep elements within a virtual 0-1200 x 0-800 coordinate box. +* **Spacing**: Ensure appropriate whitespace for readability. +* **Hierarchy**: Use different colors and shapes to distinguish information levels. +* **Elements**: Use rectangles, circles, diamonds, and arrows to organize information effectively. + +### Color Palette +* **Titles**: `#1e40af` (Deep Blue) +* **Subtitles/Connectors**: `#3b82f6` (Bright Blue) +* **Body Text**: `#374151` (Dark Gray) +* **Emphasis/Highlight**: `#f59e0b` (Amber/Gold) +* **General**: Use a harmonious color scheme; avoid visual clutter. + +## JSON Structure (The Content Payload) + +The `content` parameter of the `create_note` tool must be a **valid stringified JSON** following this structure: + +```json +{ + "type": "excalidraw", + "version": 2, + "source": "[https://github.com/tan-yong-sheng/triliumnext-skills](https://github.com/tan-yong-sheng/triliumnext-skills)", + "elements": [...], + "appState": { + "gridSize": null, + "viewBackgroundColor": "#ffffff" + }, + "files": {} +} + +``` + +## Element Template + +### Required Fields for All Elements + +Each element in the `elements` array must have these fields: + +```json +{ + "id": "unique-id-string", + "type": "rectangle|text|arrow|ellipse|diamond", + "x": 100, "y": 100, + "width": 200, "height": 50, + "angle": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "groupIds": [], + "frameId": null, + "index": "a1", + "roundness": {"type": 3}, + "seed": 123456789, + "version": 1, + "versionNonce": 987654321, + "isDeleted": false, + "boundElements": [], + "updated": 1751928342106, + "link": null, + "locked": false +} + +``` + +### Text-Specific Properties + +Elements with `type: "text"` require these additional properties: + +```json +{ + "text": "Display Text", + "rawText": "Display Text", + "fontSize": 20, + "fontFamily": 5, + "textAlign": "center", + "verticalAlign": "middle", + "containerId": null, + "originalText": "Display Text", + "autoResize": true, + "lineHeight": 1.25 +} + +``` + +--- + +## Implementation Notes & Tool Usage + +### 1. Generating the Filename (Title) + +* Create a meaningful title based on the user's topic. +* **Format**: `[Topic] - [Type]` +* *Example*: `Business Model Canvas - Matrix` or `Login Flow - Flowchart`. + +### 2. Constructing the Content + +* Generate the full JSON object based on the "JSON Structure" and "Element Template" above. +* **Important**: The `content` argument passed to the tool must be the **raw JSON string**. Do not wrap it in Markdown code blocks (like `json ... `) inside the function call, unless specifically requested to store it as a code snippet. It should be the direct JSON data. + +### 3. Calling the MCP Tool + +You must use the `create_note` tool from `triliumnext-mcp`: https://github.com/tan-yong-sheng/triliumnext-mcp. If the `triliumnext-mcp` is not installed, just directly output the json data. + +**Tool Call Logic:** + +``` +create_note( + "title": "sample title", + "content": '{"type": "excalidraw", "version": 2, "elements": [...], ...}', + "type": "canvas", + "mime": "application/json" +) +``` \ No newline at end of file diff --git a/skills/excalidraw-diagram/references/excalidraw-schema.md b/skills/excalidraw-diagram/references/excalidraw-schema.md new file mode 100644 index 00000000..e98398a2 --- /dev/null +++ b/skills/excalidraw-diagram/references/excalidraw-schema.md @@ -0,0 +1,201 @@ +# Excalidraw JSON Schema Reference + +## Color Palette + +### Primary Colors +| Purpose | Color | Hex | +|---------|-------|-----| +| Main Title | Deep Blue | `#1e40af` | +| Subtitle | Medium Blue | `#3b82f6` | +| Body Text | Dark Gray | `#374151` | +| Emphasis | Orange | `#f59e0b` | +| Success | Green | `#10b981` | +| Warning | Red | `#ef4444` | + +### Background Colors +| Purpose | Color | Hex | +|---------|-------|-----| +| Light Blue | Background | `#dbeafe` | +| Light Gray | Neutral | `#f3f4f6` | +| Light Orange | Highlight | `#fef3c7` | +| Light Green | Success | `#d1fae5` | +| Light Purple | Accent | `#ede9fe` | + +## Element Types + +### Rectangle +```json +{ + "type": "rectangle", + "id": "unique-id", + "x": 100, + "y": 100, + "width": 200, + "height": 80, + "strokeColor": "#1e40af", + "backgroundColor": "#dbeafe", + "fillStyle": "solid", + "strokeWidth": 2, + "roughness": 1, + "opacity": 100, + "roundness": { "type": 3 } +} +``` + +### Text +```json +{ + "type": "text", + "id": "unique-id", + "x": 150, + "y": 130, + "text": "Content here", + "fontSize": 20, + "fontFamily": 5, + "textAlign": "center", + "verticalAlign": "middle", + "strokeColor": "#1e40af", + "backgroundColor": "transparent" +} +``` + +### Arrow +```json +{ + "type": "arrow", + "id": "unique-id", + "x": 300, + "y": 140, + "width": 100, + "height": 0, + "points": [[0, 0], [100, 0]], + "strokeColor": "#374151", + "strokeWidth": 2, + "startArrowhead": null, + "endArrowhead": "arrow" +} +``` + +### Ellipse +```json +{ + "type": "ellipse", + "id": "unique-id", + "x": 100, + "y": 100, + "width": 120, + "height": 120, + "strokeColor": "#10b981", + "backgroundColor": "#d1fae5", + "fillStyle": "solid" +} +``` + +### Diamond +```json +{ + "type": "diamond", + "id": "unique-id", + "x": 100, + "y": 100, + "width": 150, + "height": 100, + "strokeColor": "#f59e0b", + "backgroundColor": "#fef3c7", + "fillStyle": "solid" +} +``` + +### Line +```json +{ + "type": "line", + "id": "unique-id", + "x": 100, + "y": 100, + "points": [[0, 0], [200, 100]], + "strokeColor": "#374151", + "strokeWidth": 2 +} +``` + +## Full JSON Structure + +```json +{ + "type": "excalidraw", + "version": 2, + "source": "https://excalidraw.com", + "elements": [ + // Array of elements + ], + "appState": { + "gridSize": null, + "viewBackgroundColor": "#ffffff" + }, + "files": {} +} +``` + +## Font Family Values + +| Value | Font Name | +|-------|-----------| +| 1 | Virgil (hand-drawn) | +| 2 | Helvetica | +| 3 | Cascadia | +| 4 | Assistant | +| 5 | Excalifont (recommended) | + +## Fill Styles + +- `solid` - Solid fill +- `hachure` - Hatched lines +- `cross-hatch` - Cross-hatched +- `dots` - Dotted pattern + +## Roundness Types + +- `{ "type": 1 }` - Sharp corners +- `{ "type": 2 }` - Slight rounding +- `{ "type": 3 }` - Full rounding (recommended) + +## Element Binding + +To connect text to a container: + +```json +{ + "type": "rectangle", + "id": "container-id", + "boundElements": [{ "id": "text-id", "type": "text" }] +} +``` + +```json +{ + "type": "text", + "id": "text-id", + "containerId": "container-id" +} +``` + +## Arrow Binding + +To connect arrows to shapes: + +```json +{ + "type": "arrow", + "startBinding": { + "elementId": "source-shape-id", + "focus": 0, + "gap": 5 + }, + "endBinding": { + "elementId": "target-shape-id", + "focus": 0, + "gap": 5 + } +} +``` \ No newline at end of file