RSS 中文
⌕

Chapter 23 | Visual Thinking: Excalidraw MCP Diagramming in Action

20 MIN READ | UPDATED: 2026-06-07

🎯 Learning Objectives

  1. Understand how Claude MCP (Model Context Protocol) enables rich media rendering within the terminal, specifically for graphical interfaces.
  2. Master the core JSON structure of Excalidraw and understand why it is an ideal intermediate format for AI-generated whiteboard diagrams.
  3. Learn how to use React Server Apps (RSA) extensions to "stream render" AI-generated Excalidraw data into interactive graphics directly inside the terminal.
  4. Explore methods to directly drive AI to generate and modify architectural diagrams, flowcharts, and other visual content using natural language prompts (Prompt Engineering).

📖 Core Concepts Explained

In traditional command-line interfaces, we are accustomed to text-only output. However, as the capabilities of AI assistants evolve, our expectations for interactive experiences have also risen. In this episode, we will delve into how Claude transcends text to "draw" graphics directly within the terminal, achieving true visual thinking.

23.1 Why Excalidraw?

Excalidraw is a virtual whiteboard tool that uses a simple, human-readable JSON schema to represent elements like rectangles, arrows, and text. This makes it perfect for LLMs because:

  • Declarative: Claude can describe a diagram as a list of JSON objects.
  • Hand-drawn Feel: It maintains a sketch-like aesthetic that fits the "drafting" phase of architecture.
  • Easily Editable: Claude can modify a single property (like color or x/y coordinates) to update a diagram.

23.2 The Rendering Pipeline: From JSON to RSA

To see these diagrams in your terminal, Claude uses React Server Apps (RSA). When Claude generates Excalidraw data, the MCP server provides a "view" that renders this data.

# Example command to generate a diagram
> "Draw a system architecture diagram showing a React frontend, a Node.js API, and a PostgreSQL database using Excalidraw."

Claude will then:

  1. Generate: Create the Excalidraw JSON.
  2. Invoke: Call the excalidraw-render tool.
  3. Display: Show an interactive preview (on supported terminals) or save it as a .excalidraw file for you to open.

🔧 Tools & Skills

Tool Purpose
excalidraw-draw Creates or updates an Excalidraw canvas.
excalidraw-export Exports the drawing to PNG or SVG.
rsa-render The underlying engine that allows interactive UI in the terminal.

📝 Key Takeaways

  1. Visualize Complex Ideas: Use diagrams to communicate system designs that are too complex for text alone.
  2. Iterative Design: Use natural language to say "Add a cache layer between the API and DB" and watch the diagram update instantly.
  3. Seamless Documentation: Directly save generated diagrams into your project's docs/ folder.