> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/coleam00/excalidraw-diagram-skill/llms.txt
> Use this file to discover all available pages before exploring further.

# Excalidraw Diagram Skill

> Generate beautiful and practical Excalidraw diagrams from natural language descriptions

<div className="relative bg-gradient-to-br from-[#141414] via-[#1a1a1a] to-[#0a0a0a] dark:from-[#0f1117] dark:via-[#141414] dark:to-[#0a0a0a] overflow-hidden">
  <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+')] opacity-40" />

  <div className="relative max-w-7xl mx-auto px-6 sm:px-8 py-20 lg:py-28">
    <div className="grid lg:grid-cols-12 gap-12 items-center">
      <div className="lg:col-span-7">
        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
          Diagrams That <span className="text-[#da7656]">Argue</span>, Not Just Display
        </h1>

        <p className="text-lg sm:text-xl text-gray-300 mb-8 max-w-2xl">
          A coding agent skill that generates beautiful and practical Excalidraw diagrams from natural language. Create visual arguments with evidence artifacts, render validation, and customizable brand styles.
        </p>

        <div className="flex flex-wrap gap-4">
          <a href="/quickstart" className="inline-flex items-center px-6 py-3 rounded-lg bg-[#da7656] hover:bg-[#c86847] text-white font-semibold transition-colors shadow-lg">
            Get Started

            <svg className="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
            </svg>
          </a>

          <a href="/concepts/philosophy" className="inline-flex items-center px-6 py-3 rounded-lg border-2 border-white/30 bg-white/10 hover:bg-white/20 hover:border-white/50 text-white font-semibold transition-all">
            Learn the Philosophy
          </a>
        </div>

        <div className="mt-8 flex items-center gap-6 text-sm text-gray-400">
          <div className="flex items-center gap-2">
            <svg className="w-5 h-5 text-[#da7656]" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
            </svg>

            <span>458 GitHub Stars</span>
          </div>

          <div className="flex items-center gap-2">
            <svg className="w-5 h-5 text-[#da7656]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
            </svg>

            <span>Open Source</span>
          </div>
        </div>
      </div>

      <div className="lg:col-span-5">
        <div className="relative">
          <div className="absolute inset-0 bg-[#da7656] opacity-20 blur-3xl rounded-full" />

          <div className="relative bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 shadow-2xl">
            <div className="space-y-4">
              <div className="flex items-start gap-3">
                <div className="w-10 h-10 rounded-lg bg-[#da7656]/20 flex items-center justify-center flex-shrink-0">
                  <svg className="w-6 h-6 text-[#da7656]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                  </svg>
                </div>

                <div>
                  <h3 className="text-white font-semibold mb-1">Visual Arguments</h3>
                  <p className="text-gray-400 text-sm">Diagrams where shape mirrors meaning</p>
                </div>
              </div>

              <div className="flex items-start gap-3">
                <div className="w-10 h-10 rounded-lg bg-[#da7656]/20 flex items-center justify-center flex-shrink-0">
                  <svg className="w-6 h-6 text-[#da7656]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                  </svg>
                </div>

                <div>
                  <h3 className="text-white font-semibold mb-1">Evidence Artifacts</h3>
                  <p className="text-gray-400 text-sm">Real code snippets and data examples</p>
                </div>
              </div>

              <div className="flex items-start gap-3">
                <div className="w-10 h-10 rounded-lg bg-[#da7656]/20 flex items-center justify-center flex-shrink-0">
                  <svg className="w-6 h-6 text-[#da7656]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />

                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                  </svg>
                </div>

                <div>
                  <h3 className="text-white font-semibold mb-1">Visual Validation</h3>
                  <p className="text-gray-400 text-sm">Built-in render pipeline catches layout issues</p>
                </div>
              </div>

              <div className="flex items-start gap-3">
                <div className="w-10 h-10 rounded-lg bg-[#da7656]/20 flex items-center justify-center flex-shrink-0">
                  <svg className="w-6 h-6 text-[#da7656]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
                  </svg>
                </div>

                <div>
                  <h3 className="text-white font-semibold mb-1">Customizable Styles</h3>
                  <p className="text-gray-400 text-sm">Single-file brand color system</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <div className="text-center mb-12">
    <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Quick Start</h2>

    <p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
      Get up and running with the Excalidraw Diagram Skill in minutes
    </p>
  </div>

  <Steps>
    <Step title="Install the skill">
      Clone the repository and copy it into your project's `.claude/skills/` directory:

      ```bash theme={null}
      git clone https://github.com/coleam00/excalidraw-diagram-skill.git
      cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram
      ```

      The skill is now available to your coding agent.
    </Step>

    <Step title="Set up the render pipeline">
      Install dependencies for the visual validation pipeline:

      ```bash theme={null}
      cd .claude/skills/excalidraw-diagram/references
      uv sync
      uv run playwright install chromium
      ```

      <Tip>You can also ask your coding agent to run these commands for you!</Tip>
    </Step>

    <Step title="Create your first diagram">
      Ask your coding agent to create a diagram:

      > "Create an Excalidraw diagram showing how the AG-UI protocol streams events from an AI agent to a frontend UI"

      The skill handles concept mapping, layout, JSON generation, rendering, and visual validation automatically.
    </Step>

    <Step title="Customize colors (optional)">
      Edit `references/color-palette.md` to match your brand:

      ```markdown theme={null}
      | Primary/Neutral | `#3b82f6` | `#1e3a5f` |
      ```

      All diagrams will automatically use your custom color palette.
    </Step>
  </Steps>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <div className="text-center mb-12">
    <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Core Features</h2>

    <p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
      Everything you need to create diagrams that teach and persuade
    </p>
  </div>

  <CardGroup cols={2}>
    <Card title="Visual Arguments" icon="shapes" href="/concepts/philosophy">
      Learn the core philosophy: diagrams should argue visually, not just display information. Each shape mirrors the concept it represents.
    </Card>

    <Card title="Evidence Artifacts" icon="code" href="/concepts/evidence-artifacts">
      Include real code snippets, JSON payloads, and concrete examples that prove accuracy and help viewers learn.
    </Card>

    <Card title="Pattern Library" icon="diagram-project" href="/methodology/pattern-library">
      Ready-to-use visual patterns for common structures: fan-out, convergence, tree, spiral, cloud, and assembly line.
    </Card>

    <Card title="Render & Validate" icon="eye" href="/guides/render-validate">
      Built-in Playwright pipeline lets agents see their own output and fix layout issues before delivering.
    </Card>

    <Card title="Multi-Zoom Architecture" icon="magnifying-glass-plus" href="/concepts/multi-zoom">
      Create comprehensive diagrams that work at multiple levels: summary flow, section boundaries, and detailed evidence.
    </Card>

    <Card title="Brand Customization" icon="palette" href="/guides/customization">
      Single-file color system makes it easy to match your brand. Everything else is universal design methodology.
    </Card>
  </CardGroup>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <div className="text-center mb-12">
    <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Explore by Topic</h2>

    <p className="text-lg text-gray-600 dark:text-gray-400">
      Dive deeper into the methodology and technical details
    </p>
  </div>

  <div className="grid md:grid-cols-3 gap-6">
    <a href="/concepts/philosophy" className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#da7656] dark:hover:border-[#da7656] overflow-hidden no-underline transition-colors bg-white dark:bg-[#1a1d27]">
      <div className="p-6">
        <div className="w-12 h-12 rounded-lg bg-[#da7656]/10 dark:bg-[#da7656]/20 flex items-center justify-center mb-4">
          <svg className="w-6 h-6 text-[#da7656]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
          </svg>
        </div>

        <h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2">Core Concepts</h3>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
          Master the philosophy of visual arguments, depth assessment, and evidence artifacts
        </p>

        <div className="flex items-center text-sm font-medium text-gray-900 dark:text-white group-hover:text-[#da7656] transition-colors">
          Learn more

          <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
    </a>

    <a href="/methodology/design-process" className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#da7656] dark:hover:border-[#da7656] overflow-hidden no-underline transition-colors bg-white dark:bg-[#1a1d27]">
      <div className="p-6">
        <div className="w-12 h-12 rounded-lg bg-[#da7656]/10 dark:bg-[#da7656]/20 flex items-center justify-center mb-4">
          <svg className="w-6 h-6 text-[#da7656]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
          </svg>
        </div>

        <h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2">Design Methodology</h3>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
          Follow the design process, pattern library, and layout principles for professional diagrams
        </p>

        <div className="flex items-center text-sm font-medium text-gray-900 dark:text-white group-hover:text-[#da7656] transition-colors">
          Explore methodology

          <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
    </a>

    <a href="/reference/color-palette" className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#da7656] dark:hover:border-[#da7656] overflow-hidden no-underline transition-colors bg-white dark:bg-[#1a1d27]">
      <div className="p-6">
        <div className="w-12 h-12 rounded-lg bg-[#da7656]/10 dark:bg-[#da7656]/20 flex items-center justify-center mb-4">
          <svg className="w-6 h-6 text-[#da7656]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
          </svg>
        </div>

        <h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2">Technical Reference</h3>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
          Complete reference for color palettes, element templates, and the Excalidraw JSON schema
        </p>

        <div className="flex items-center text-sm font-medium text-gray-900 dark:text-white group-hover:text-[#da7656] transition-colors">
          View reference

          <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
    </a>
  </div>
</div>

<div className="mt-20 mb-16 max-w-5xl mx-auto px-6">
  <div className="rounded-2xl bg-gradient-to-r from-[#141414] to-[#1a1a1a] dark:from-[#1a1d27] dark:to-[#242838] border border-gray-200 dark:border-[#27272a] p-8 md:p-12">
    <div className="max-w-3xl">
      <h2 className="text-3xl font-bold text-white mb-4">
        Ready to Create Visual Arguments?
      </h2>

      <p className="text-lg text-gray-300 mb-6">
        Install the skill and start generating diagrams that teach, persuade, and communicate complex ideas with visual clarity.
      </p>

      <div className="flex flex-wrap gap-4">
        <a href="/quickstart" className="inline-flex items-center px-6 py-3 rounded-lg bg-[#da7656] hover:bg-[#c86847] text-white font-semibold transition-colors">
          Get Started

          <svg className="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
          </svg>
        </a>

        <a href="https://github.com/coleam00/excalidraw-diagram-skill" className="inline-flex items-center px-6 py-3 rounded-lg border-2 border-white/30 bg-white/10 hover:bg-white/20 hover:border-white/50 text-white font-semibold transition-all">
          View on GitHub
        </a>
      </div>
    </div>
  </div>
</div>