ASCII Magic
Open tool

Animated ASCII diagrams

Each ASCII diagram here explains something by moving through it step by step: a token travels a flowchart, SYN and ACK packets step down a TCP ladder, a login request hops between browser, app and auth server, and a load balancer fans traffic across four servers. Seeing the order of events is the part a static drawing cannot give you.

36 pieces

View use cases
Architecture MapExplainers
Binary Search StepsExplainers
Binary Search TreeExplainers
Blue Green SwitchExplainers
Canary Rollout GatesExplainers
Edge Cache Hit MissExplainers
CI PipelineExplainers
Circuit Breaker StatesExplainers
Consistent Hash RingExplainers
ETL Data FlowExplainers
Primary Replica SyncExplainers
Dijkstra Shortest PathExplainers
DNS Lookup PathExplainers
ER DiagramExplainers
FlowchartExplainers
Gantt ChartExplainers
Git Branch GraphExplainers
Gradient Descent ContoursExplainers
Load BalancerExplainers
LRU Cache EvictionExplainers
MapReduce Word CountExplainers
Job Queue WorkersExplainers
Mind MapExplainers
Network TopologyExplainers
Neural Net Forward PassExplainers
OAuth Code FlowExplainers
Org ChartExplainers
Pub Sub Fan OutExplainers
Sequence DiagramExplainers
Bubble vs Quick SortExplainers
State MachineExplainers
TCP Handshake LadderExplainers
TimelineExplainers
Token Bucket LimiterExplainers
Trace Span WaterfallExplainers
Venn DiagramExplainers

Where to start

They cover system design, networking, algorithms, data structures, machine learning and planning, so they fit documentation, engineering blogs, lectures, interview prep and onboarding guides. Each one embeds with one tag, exports as a GIF or video for slides, and copies as plain text when you need a still text diagram for a README or a code comment.

Architecture MapRequests flow from clients through a CDN and a load balancer to services and data stores, a ready-made ASCII architecture diagram for a docs overview or a system design post.Sequence DiagramRequests and dashed replies draw across the lifelines one after another in a login flow, a clean ASCII sequence diagram for API documentation.FlowchartA token travels the arrows of an order flowchart, loops back on an error and logs each step, the simplest way to show a process with a decision in it.TCP Handshake LadderSYN, SYN-ACK and ACK step down a packet ladder, followed by a request, a reply and the four-way close, a full networking lesson in one loop.Bubble vs Quick SortBubble sort and quicksort race on the same shuffled bars, so the difference in speed is obvious within seconds, made for algorithm classes and interview prep.Neural Net Forward PassSignals travel along weighted connections layer by layer until a softmax bar names the shape, a gentle first look at how a neural network reads its input.

When an animated diagram beats a static one

A static diagram shows the parts. An animated one shows the order, the timing and what changes, which is usually the hard part to explain. Reach for motion when:

  • Order matters: OAuth Code Flow and TCP Handshake Ladder only make sense in sequence.
  • State changes over time: Circuit Breaker States trips open, waits out a cooldown and closes again, and State Machine walks through errors and retries.
  • Load or backlog builds up: Job Queue Workers swells during a burst and drains, and Pub Sub Fan Out shows one slow subscriber falling behind and catching up.
  • Two approaches compete: Bubble vs Quick Sort and Gradient Descent Contours put the methods side by side.

ASCII diagrams by topic

Find the diagram that matches what you are explaining:

  • System design: Architecture Map, Load Balancer, Edge Cache Hit Miss, Primary Replica Sync, Consistent Hash Ring and MapReduce Word Count.
  • Releases and operations: CI Pipeline, Blue Green Switch, Canary Rollout Gates and Trace Span Waterfall.
  • Networking and security: TCP Handshake Ladder, DNS Lookup Path, Network Topology, OAuth Code Flow and Token Bucket Limiter.
  • Algorithms and data structures: Binary Search Steps, Binary Search Tree, Dijkstra Shortest Path, LRU Cache Eviction and Bubble vs Quick Sort.
  • Machine learning: Neural Net Forward Pass and Gradient Descent Contours.
  • Planning and thinking: Flowchart, Sequence Diagram, Gantt Chart, Mind Map, Timeline, Venn Diagram, Org Chart and ER Diagram.

Putting a diagram in docs, a README or a code comment

For a docs page or a blog that accepts HTML, add the script tag once and drop in <ascii-art piece="oauth-flow"><ASCII library-art> beside the paragraph that explains it. React-based docs can use the React tab on the piece page instead. Write the explanation in your own words as well, so readers and search engines get the steps even when the animation is paused.

For a README, download the GIF, since scripts do not run there. For a code comment or a design doc, pause on the most telling frame, press Copy as text and paste it inside a comment block as a plain text diagram. If the idea fits in one frame, such as ER Diagram or Org Chart, that still copy may be all you need.

Using diagrams in talks, lessons and interview prep

In a talk, an animated diagram keeps the room on the step you are explaining. Export a 1920 by 1080 video for your slide, and if a busy diagram such as MapReduce Word Count moves too fast to narrate, present it from the live piece page at 0.5x speed instead.

For teaching, Binary Search Steps logs every comparison and Dijkstra Shortest Path updates distances as it relaxes each edge, so students can pause and predict the next step. For interview prep, Consistent Hash Ring, LRU Cache Eviction and Token Bucket Limiter cover three topics that come up often in system design questions.

Ways to use ASCII explainers

Step-by-step guides with a live builder and code to copy.

All 18 use cases →
Docs

ASCII art for docs sites and landing pages

Add animated ASCII art to docs and landing pages built with Next.js, Astro, Docusaurus or plain HTML. Diagrams, terminals and heroes that load instantly.

Slides

ASCII art for slides and presentations

Drop animated ASCII art into Keynote, PowerPoint or Google Slides as a GIF or video, for title slides and section breaks.

Code

ASCII art headers for source code comments

Copy ASCII art and block-letter banners as text for file headers and section comments in your code.

README

Animated ASCII art for a GitHub README

Put an animated ASCII banner, scene or loader at the top of your GitHub README. Copy a GIF or SVG, no build step, works in GitHub's dark and light themes.

/FAQS

ASCII explainers: frequently asked questions

Answers about using ASCII explainers on websites, in READMEs, in terminals and in exports.

Q. What is an ASCII diagram?
An ASCII diagram is a drawing of a system, process or structure made from text characters, with boxes built from line characters and arrows from dashes and brackets. Because it is text, it lives happily in code, READMEs and terminals. The ones on this page are animated, so they show each step in order.
Q. How do I make an ASCII flowchart?
Start from the Flowchart piece, which already has boxes, a decision diamond and arrows laid out in characters. Pause it, press Copy as text, and edit the labels by hand in any monospace editor. To keep it animated with your own steps, copy the piece's source from its page and change its label strings.
Q. What is a text diagram?
A text diagram is any diagram written in plain characters rather than drawn as an image, so it can sit inside code, Markdown, email or a terminal. Box, arrow and line characters do the drawing. Text diagrams are easy to version and compare in a diff, which is why developers like them in docs and pull requests.
Q. Can I put ASCII diagrams in my documentation?
Yes, ASCII diagrams embed in any docs page that allows HTML with one script tag and one ascii-art element. For Markdown-only pages, use the GIF export, or paste a still frame as text inside a code block. The docs and landing pages guide walks through the common setups step by step.
Q. Is there an ASCII sequence diagram?
Yes, Sequence Diagram draws a login flow where requests and dashed replies cross the lifelines one after another. OAuth Code Flow follows the same idea across the browser, app, auth server and API, and TCP Handshake Ladder is a sequence diagram of packets moving between a client and a server.
Q. Is there an ASCII architecture diagram I can use?
Yes, Architecture Map shows clients, a CDN, a load balancer, services and data stores, with requests flowing along every link. For deeper views, Primary Replica Sync covers database replication, Edge Cache Hit Miss covers caching and Pub Sub Fan Out covers event messaging. All of them are MIT licensed for use in your own docs.
Q. Can I edit the labels in an animated diagram?
Yes, by editing a copy of the source. The piece page shows the full JavaScript, and labels such as node names and messages are plain strings you can change. If you only need a still diagram, copy a frame as text and edit the labels directly in your editor.
Q. Which steps does the TCP handshake diagram show?
TCP Handshake Ladder steps SYN, SYN-ACK and ACK down between client and server, then shows a request and its reply, and finally the four-way close. Each socket state is logged as it changes, so you can point to the exact moment the connection opens and the moment it closes.
Q. What is the best way to show an algorithm step by step?
Animate it with the data visible at every step, which is what the algorithm pieces here do. Binary Search Steps grays out the discarded half and logs each comparison, Binary Search Tree lights the path before each insert, and LRU Cache Eviction moves a node to the front on every hit.
Q. Can I use an ASCII art diagram in a presentation?
Yes, export the diagram as a 1920 by 1080 or 4K video and insert it into your slides, where it loops like any other clip. A GIF works in slide tools that handle images better than video. Diagrams with a clear start and end, such as Blue Green Switch or Canary Rollout Gates, read best on a loop.
Q. Is there an animated diagram for machine learning?
Yes, two. Neural Net Forward Pass shows a small network reading a pixel shape, with neurons shading by activation layer after layer and a softmax bar naming the result. Gradient Descent Contours compares plain gradient descent zigzagging across a valley with momentum curving smoothly to the minimum, with loss curves alongside.
Q. Can I draw a mind map, Gantt chart or org chart in ASCII?
Yes, all three are here. Mind Map grows branches from a central idea out to six topics, Gantt Chart sweeps a today marker across task bars and milestones, and Org Chart draws itself from the top down. Copy a frame as text for a quick planning doc, or embed the live version on a team page.

Related categories

All categories