@BenjDicken: I got "how did you make these diagrams?" a lot yesterday. BTS time! Most began their life as static drawings in Excalid…
Summary
Ben Dicken shares his diagram creation process using Excalidraw for static layouts and Cursor for animation, part of a behind-the-scenes look at his technical article on sharding.
View Cached Full Text
Cached at: 07/16/26, 10:23 PM
I got “how did you make these diagrams?” a lot yesterday. BTS time!
Most began their life as static drawings in Excalidraw.
It’s helpful to nail down layout and visual goals before jumping into animation. Here’s what they looked like:
Next step, Cursor
Next was screenshotting each and prompted Cursor along the lines of this.
(This was mostly gpt 5.5 / 5.6)
Using the image + extra context got pretty close, but typically took a few more rounds of prompting to hone.
To make the visuals on-brand, I hit up @rawloopsusa who made inspo assets, which cursor turned into some design rules. Let cursor take a pass to improve with the skill.
Some visuals, like the USL graph, I added later. But thanks to the design skills and several rounds of prompting, got something very nice.
There’s was plenty of other tweaking sizing, and getting things juuuuust right for publication.
But it’s cool how much llms can do for you here, when you give the right context and steering.
speechless
They’ve come a long way.
Still not amazing at design out of the box, but with guidance make great things.
Similar Articles
@0xQiYan: Still drawing architecture diagrams manually? Dragging and tweaking for half a day? Bookmark this! Today I have to recommend this skill—I recently installed `drawio-skill`, and with just one sentence it can generate professional diagrams, no more drawing by hand. The logic is very simple: just speak naturally (e.g., "draw a trading system architecture diagram"), and it generates the diagram directly...
Introducing the drawio-skill tool, which generates professional diagrams such as architecture diagrams, flowcharts, ER diagrams, etc., based on natural language descriptions. It supports multi-round iteration and export to various formats, significantly improving diagramming efficiency.
@geekbb: A framework and CLI tool that enables AI to generate "correct and beautiful" draw.io architecture diagrams. Uses real stencil validation and automatic layout to cover AWS/Azure/GCP/Databricks/BPMN, specifically curing the problem of AI fabricating shape IDs and drawing blank boxes. https…
A framework and CLI tool that enables AI agents to generate structurally precise and aesthetically standardized draw.io diagrams for AWS, Azure, GCP, Databricks, and BPMN architectures, using real stencil validation and automatic layout to prevent hallucinated empty shapes.
@trq212: This makes artifacts much more expressive and can be combined in creative ways. One of my favorites is to create a dash…
Claude Code artifacts now support public sharing and multiplayer editing, enabling users to create and share editable dashboards for their projects.
Show HN: Atlasphere – Live Infrastructure Diagrams
Atlasphere is a macOS app that automatically generates live infrastructure diagrams from your AWS account using a read-only IAM role, keeping diagrams in sync with actual resources.
@GitHub_Daily: Need to explain project system architecture to colleagues. Just talking without diagrams is limited, and drawing manually is time-consuming and often not well-made. archify, an Agent Skill that can be embedded into Claude Code, Codex CLI, and opencode, turns plain language descriptions directly into an architecture diagram…
archify is an Agent Skill that can be embedded into Claude Code, Codex CLI, and opencode, directly generating system architecture diagrams, workflow diagrams, sequence diagrams, data flow diagrams, and lifecycle state diagrams from plain language descriptions. It supports dark/light theme toggling and export in multiple formats.