mirror of
https://github.com/hansjone/oclaw.git
synced 2026-10-09 00:40:45 +08:00
skills: add excalidraw-diagram for Trilium Excalidraw notes
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
parent
f367779ad1
commit
d16791fb7d
2 changed files with 368 additions and 0 deletions
167
skills/excalidraw-diagram/SKILL.md
Normal file
167
skills/excalidraw-diagram/SKILL.md
Normal file
|
|
@ -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"
|
||||
)
|
||||
```
|
||||
201
skills/excalidraw-diagram/references/excalidraw-schema.md
Normal file
201
skills/excalidraw-diagram/references/excalidraw-schema.md
Normal file
|
|
@ -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
|
||||
}
|
||||
}
|
||||
```
|
||||
Loading…
Add table
Add a link
Reference in a new issue