Excalidraw Diagram Skill logo

Excalidraw Diagram Skill

Visit

Generate Excalidraw diagrams from text for Obsidian - supports flowcharts, mind maps, relationship diagrams, timelines, and more with automatic file creation.

Share:

Excalidraw Diagram Generator

Create Excalidraw diagrams from text content, automatically outputting Obsidian-ready .md files with proper frontmatter and JSON structure.

Key Benefits

  • Auto-generate Excalidraw diagrams from text descriptions
  • 8 diagram types: flowcharts, mind maps, hierarchy, relationship, comparison, timeline, matrix, freeform
  • Automatic file creation with proper Obsidian frontmatter
  • Excalifont handwriting font (fontFamily: 5) for all text
  • Professional color palette with semantic meaning
  • Canvas range optimization (0-1200 x 0-800)

Core Capabilities

  • Diagram Types: Flowchart, mind map, hierarchy, relationship, comparison, timeline, matrix, freeform layout
  • Text Formatting: Automatic quote replacement ("『』, ()「」), proper font family (Excalifont)
  • Layout Rules: Proper element spacing, clear hierarchy, harmonious color schemes
  • File Generation: Auto-save to current directory with meaningful filenames
  • Obsidian Integration: Complete frontmatter with excalidraw-plugin: parsed and tags: [excalidraw]

When to Use

  • Creating diagrams, flowcharts, or mind maps from text
  • Visualizing concepts, relationships, or processes
  • Building visual representations in Excalidraw format
  • User mentions "Excalidraw", "画图", "流程图", "思维导图", "可视化", "diagram"

Workflow

  1. Analyze content - identify concepts, relationships, hierarchy
  2. Choose appropriate diagram type from 8 options
  3. Generate Excalidraw JSON with proper element structure
  4. Create Obsidian-ready .md file with correct frontmatter
  5. Auto-save to current working directory
  6. Notify user with file path and usage instructions

Technical Requirements

  • All text elements use fontFamily: 5 (Excalifont)
  • Quote replacement: "『』, ()「」
  • Font sizes: Title (24-28px), Subtitle (18-20px), Body (14-16px)
  • Line height: lineHeight: 1.25 for all text
  • Color palette: Deep blue (#1e40af) for titles, bright blue (#3b82f6) for connections

Source: https://github.com/axtonliu/axton-obsidian-visual-skills/tree/main/excalidraw-diagram License: Check repository for details

Comments

No comments yet. Be the first to comment!