Excalidraw Prompts: Turning Thinking Into a Visual Harness

A practical note on designing Excalidraw prompts as visual contracts with hierarchy, spatial grammar, arrow semantics, and verification loops.

The first mistake people make with Excalidraw prompts is stopping at “make it look hand-drawn and pretty.” Excalidraw does have a charming roughness: loose lines, generous whitespace, and a sketch-like feeling. But if the prompt only imitates that style, the result quickly becomes messy. There are boxes everywhere, arrows point in too many directions, and the reader has no clear starting point.

The reason I became interested in Excalidraw inside my blog and note system was not the style. Excalidraw is useful because it forces the position of a thought. What belongs in the center? What should move to the edge? Which concepts should be grouped, and which should stay separate? Which relationships deserve arrows?

That is why a good Excalidraw prompt is not merely a request for a drawing. It is a visual contract. It tells the model: place these concepts with this hierarchy and spatial grammar, connect only these relationships, and revise the diagram if it fails these checks.

This article continues the line of thinking behind the SDLC 2.0 cheatsheet, the recent note on HTML-output prompts, and the storyboard-generation harness. The point is simple: a diagram is not decoration. It is a verification device for thought.

Excalidraw Should Not Be Used Like Mermaid

Mermaid is strong when the relationship is already precise. It works well for flowcharts, state transitions, dependency graphs, and sequence diagrams: structures that can be fixed in syntax. You declare the relationships almost like code, and Mermaid renders a consistent diagram.

Excalidraw is different. Its strength is not strict syntax but spatial meaning. Center and edge, near and far, grouped and separated, large boxes and small notes, thick arrows and dotted arrows all carry meaning.

So the prompts should be different too.

Tool Best Question Prompt Focus
Mermaid Can this relationship be expressed as a precise graph? Nodes, edges, direction, state, sequence
Excalidraw Can this idea be arranged as a readable board? Center, regions, distance, emphasis, annotation

A Mermaid prompt begins with syntax. An Excalidraw prompt begins with the reader’s eye. If you miss that distinction, Excalidraw becomes only a prettier substitute for Mermaid.

A Good Diagram Is Not Pretty Lines

Some Excalidraw diagrams look good at first glance. They have sketchy lines, color, and icons. But when you try to explain them, the structure falls apart. Why is this box here? Why does this arrow point there? What is central, and what is secondary?

That kind of drawing is closer to a pleasant doodle.

A good diagram can be rough and still explain itself. The central concept holds the main question. The surrounding groups divide that question into parts. The arrows create a reading path. Small annotations prevent predictable misunderstandings.

When I design an Excalidraw prompt, I start with six layers.

Layer Question What to Specify
Central question What should this diagram make clear? One-sentence title and central node
Concept hierarchy What is first-level, second-level, and supporting material? Major groups, sub-boxes, side notes
Spatial grammar Where should each thing live? Center, left/right, top/bottom, distance
Arrow semantics Which relationships deserve lines? Cause, sequence, feedback, contrast, dependency
Annotation layer Which misunderstandings need short notes? Captions, callouts, examples
Verification loop How will we know the diagram works? Mobile readability, arrow tracing, clear center

Without these layers, the model tends to draw a lot. But drawing a lot is not the same as making something readable. The goal of an Excalidraw prompt is not to fill the canvas. It is to create a path of explanation.

A Reusable Excalidraw Prompt Template

Here is a base template I would reuse. It can be pasted as-is or shortened for a specific article.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
You are an Excalidraw diagram designer.

Goal:
- [The core question this diagram should help the reader understand]

Input material:
- [Summary, article, meeting notes, concept list, or code structure]

Visual contract:
- Choose one central node.
- Limit first-level groups to 3-5.
- Place each group in a distinct region.
- Distinguish arrows for causality, sequence, feedback, contrast, and dependency.
- Keep each box label around 20 characters.
- Prioritize relationships over decoration.

Excalidraw style:
- Hand-drawn-style lines, generous whitespace, muted colors.
- Use color only to separate groups.
- Use icons only when they clarify a concept.

Verification:
- Can the title reveal the main question?
- Does following the arrows create an explanation path?
- Is the hierarchy between the center and surrounding concepts clear?
- Are the key labels readable in a mobile screenshot?

Output:
- Diagram plan
- Node list
- Connection list
- Excalidraw production instructions
- Verification checklist

The important move is that the prompt asks for design before drawing. You may later generate an actual .excalidraw file, or you may use the output as a brief and draw it yourself. Separating the diagram plan, nodes, connections, and production instructions makes revision much easier.

In an LLM Wiki, the Diagram Is Also a Node

From an LLM Wiki perspective, an Excalidraw diagram is not just an image attached to an article. It is another node. The article explains in sentences. The diagram explains in relationships. Both compress the same subject in different ways.

If the article is about a prompt harness, the prose explains the concept and examples. The Excalidraw board shows how the structure works.

LLM Wiki Node Excalidraw Form
Core concept Central box
Related concepts Surrounding groups
Operating sequence Thick arrows
Feedback Returning arrows
Risk or failure Warning callout
Next article idea Open question box

With this structure, the diagram becomes more than a summary. It becomes an index that invites the next piece of writing. The reader uses it to understand the whole system; the writer uses it to see what should be written next.

Write the Failure Patterns Into the Prompt

An Excalidraw prompt should not only describe the desired result. It should also describe what to avoid. These failure patterns appear often:

Failure Pattern Symptom Prevention
Pretty chaos Many colors and icons, no central question Fix one central node first
Text overload Every box contains a sentence Limit labels to around 20 characters
Arrow overload Everything points to everything else Define arrow meanings before drawing
No hierarchy Concepts and examples have the same weight Separate first, second, and third-level nodes
Thumbnail failure Labels are unreadable when shared Check mobile screenshot readability
Markdown leakage ##, **, or list marks appear inside labels Require plain-text labels

Adding this table to the end of the prompt changes the output. Models often follow negative constraints more reliably than vague ideals. The “do not leak markdown syntax into labels” rule is especially important. It is the same family of problem as callout syntax appearing on a published blog page.

A Workflow for Turning an Article Into Excalidraw

The workflow I want to use is simple:

  1. Write the article first.
  2. Extract the central question and first-level concepts.
  3. Use an Excalidraw prompt to create the visual contract.
  4. Draft the diagram.
  5. Check whether it is readable in the article and in a mobile screenshot.
  6. Preserve both the .excalidraw source and the SVG or PNG export.

This loop matters because the diagram pushes back on the writing. While drawing, you notice things: this concept is not actually central, this arrow is weak, this group should be split in two. A good diagram does not merely decorate the article. It pressures the structure of the article.

That is why Excalidraw works best as a mid-draft verification tool, not as a final ornament. Once the draft has a shape, make the diagram. If the diagram feels awkward, revise the article.

How I Want to Use This Going Forward

For future prompt essays, book notes, video notes, and news explainers on this blog, I want to attach a visual node whenever it is useful. Not every article needs a large infographic. Some only need a small concept map. Others need a flowchart, comparison board, or storyboard.

The point is not to add images. The point is to make the thinking structure visible.

Excalidraw prompts are a useful middle language for that job. They do not freeze thought inside rigid diagram syntax, but they also do not scatter meaning into free-form image generation. They feel loose, but when written well, they become strict thinking tools.

A good Excalidraw prompt says:

Do not merely draw this idea nicely. Place it where it can be understood.

That difference looks small, but it changes the work. Once ideas have positions, relationships become visible. Once relationships become visible, missing parts appear. Once missing parts appear, the next question emerges. At that point, the diagram is no longer an image. It is a harness for personal knowledge work.

Comments

댓글

GitHub 계정으로 의견을 남길 수 있습니다. 댓글은 GitHub Discussions에 저장됩니다.