oclaw/skills/excalidraw-diagram/SKILL.md

name	description	metadata
excalidraw-diagram	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".	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:

{
  "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:

{
  "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:

{
  "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"
)