103 templates · page 1 of 2
Custom / SVG diagram templates
Hand-crafted SVG schematics for specialized research figures.
Bus Timing
Clock, address bus, data bus with annotations.
WaveDromRegister Bit-field
Register layout with named bit-fields.
WaveDromFSM-controlled Signals
Control signals driven by a finite state machine.
WaveDromPacket Diagram (TCP header)
Bit-field layout of a TCP segment header.
MermaidBlock Diagram
Free-form block layout — useful for hardware block diagrams.
MermaidPlantUML — Wireframe (Salt)
UI mock-up / wireframe with the Salt grammar.
PlantUMLPlantUML — Ditaa (ASCII art)
Convert ASCII art into a crisp box-and-arrow diagram.
PlantUMLPlantUML — TCP Packet Layout
TCP header bit-field layout rendered with json-style nested blocks.
PlantUMLHand-drawn look (frontmatter)
YAML frontmatter selects the sketchy 'handDrawn' look + 'forest' theme + ELK layout engine.
MermaidFlowchart Node Shapes (v11.3)
Showcase of 20+ named node shapes added in Mermaid 11.3 — manual-file, paper-tape, win-pane, brace, multi-doc, summary, hourglass, more.
MermaidNeural Network Architecture (SVG)
Feed-forward neural network — input → 2 hidden layers → output.
Raw SVGOptical Ray Diagram (SVG)
Converging lens ray diagram — object, lens, focal points, image.
Raw SVGWaveDrom — SPI bus
SPI master/slave transaction — clock, MOSI, MISO, chip-select.
WaveDromWaveDrom — I²C bus
I²C start, address byte, ACK, data byte, stop condition.
WaveDromFeynman Diagram (SVG)
Particle physics interaction — Compton-style electron + photon vertex.
Raw SVGWireframe — Dashboard
Low-fidelity dashboard wireframe with nav, KPIs, chart, table.
Raw SVGWaveDrom — AXI Read Burst
AXI4 read burst timing — ARVALID/ARREADY handshake then 4 beats.
WaveDromApproach Plate (simplified)
Simplified ILS approach: outer marker, FAF, runway and altitude callouts.
Raw SVGWireframe — Mobile App
Low-fi mobile app screen with status bar, hero, feed and tab bar.
Raw SVGWireframe — E-commerce Product Page
Two-column product page wireframe with gallery, details and reviews.
Raw SVGUART Frame
8-N-1 UART frame — start bit, 8 data bits LSB first, stop bit.
WaveDromDDR Read Burst
Double-data-rate read — data valid on both clock edges.
WaveDromJTAG TAP Controller Bits
TMS sequence to navigate Test-Logic-Reset → Shift-DR.
WaveDromPCIe TLP Beat
PCIe TLP framing on Gen1 single-lane — STP / payload / END.
WaveDromSalt Wireframe — Settings Form
Settings page wireframe with grouped fields, toggles and buttons.
PlantUMLFloor Plan — Small Office
Top-down floor plan of a four-room office suite with door swings.
Raw SVGWarehouse Layout
Top-down warehouse with receiving, storage, picking, packing, shipping zones.
Raw SVGFootball Formation — 4-3-3
4-3-3 attacking formation on a half-pitch with role labels.
Raw SVGBasketball — Pick & Roll
Classic high pick-and-roll play with screen, roll and pop arrows.
Raw SVGRugby Lineout
Standard 7-player lineout with jumpers, lifters and scrum-half.
Raw SVGHockey Power Play (5v4)
1-3-1 umbrella power-play setup with passing options.
Raw SVGCricket — Standard Field Setting
Cricket field with standard 6-3 right-hand-batter fielding positions.
Raw SVGGolf Hole Map
Par-4 hole with tee, fairway, hazards and green.
Raw SVGTennis Serve Placement
Service-box heatmap zones — wide / body / T.
Raw SVGStarting position
The canonical opening position — every chess position is reachable from here.
Chess (FEN)Opera Game — final position
Morphy vs. Duke of Brunswick & Count Isouard, Paris 1858 — checkmate in style.
Chess (FEN)Immortal Game — final blow
Anderssen vs Kieseritzky, London 1851 — the move before #23 Be7#.
Chess (FEN)Mate-in-two puzzle
Classic two-board puzzle layout — position, then the move-pair solution. Demonstrates multi-FEN rendering.
Chess (FEN)Venn — music style overlap
Three-set overlap of related musical genres.
Venn / EulerChess — back-rank mate setup
Position showing a back-rank mate threat.
Chess (FEN)Chess — pawn endgame study
King-and-pawn opposition study.
Chess (FEN)Chess — Italian game opening
Position after 1.e4 e5 2.Nf3 Nc6 3.Bc4 Bc5.
Chess (FEN)Chess — French Defense opening
Classical French Defense position.
Chess (FEN)Kanban — personal weekly board
Solo board for the week.
Kanban boardFloor plan — studio apartment
Single-room studio with kitchenette and bathroom.
Floor plan (2D)Floor plan — two-bedroom flat
Two-bedroom flat with living room and shared bathroom.
Floor plan (2D)Floor plan — open-plan office
Open-plan office with private rooms along one wall.
Floor plan (2D)Floor plan — small restaurant
Restaurant with dining area, bar, kitchen, and restrooms.
Floor plan (2D)Floor plan — small medical clinic
Reception, waiting area, three exam rooms.
Floor plan (2D)Floor plan — primary classroom
Single classroom with desk rows, reading corner and storage.
Floor plan (2D)Floor plan 3D — studio apartment (iso)
Same studio apartment as the 2D template, rendered in isometric.
Floor plan (3D)Floor plan 3D — small house (iso)
L-shaped house in axonometric — three rooms + bath.
Floor plan (3D)Floor plan 3D — open office (front view)
Front elevation of the open-office plan.
Floor plan (3D)3D viewer — studio apartment
Real-time 3D viewer; drag to orbit, wheel to zoom.
Floor plan (3D WebGL)3D viewer — two-bedroom house
Live 3D fly-around of a two-bedroom plan.
Floor plan (3D WebGL)Music — Twinkle Twinkle Little Star
Classic nursery melody — single voice, treble clef.
Music notationMusic — C major scale
Ascending C major scale.
Music notationMusic — 12-bar blues phrase
A simple bluesy line over four bars.
Music notationMusic — bass-clef walking line
Bass clef quarter notes outlining a I-IV-V-I.
Music notationTimeline — 20th-century technology
Parallel science / computing / politics narrative.
Timeline (history)Timeline — antiquity
Major events from -3000 to 500 CE.
Timeline (history)Timeline — Renaissance + early modern
Cultural / scientific milestones 1400–1800.
Timeline (history)Chords — cycle of fifths
Full cycle-of-fifths wheel with majors / relative minors.
Music chords (cycle of fifths)Chords — ii–V–I in C
Most common jazz cadence.
Music chords (cycle of fifths)Chords — I–V–vi–IV (pop)
Ubiquitous pop progression in C.
Music chords (cycle of fifths)Chords — 12-bar blues changes
Three-chord blues progression labelled with Roman numerals.
Music chords (cycle of fifths)Piano roll — C major scale
Ascending C major scale visualization.
Piano roll (MIDI)Piano roll — Twinkle Twinkle
Opening phrase of Twinkle Twinkle Little Star.
Piano roll (MIDI)Piano roll — Cmaj7 arpeggio
Arpeggiated Cmaj7 chord.
Piano roll (MIDI)Piano roll — jazz lick
Mixolydian-flavoured walking line.
Piano roll (MIDI)Piano roll — I-V-vi-IV progression
Pop chord progression with simultaneous notes.
Piano roll (MIDI)Tournament — 8-team knockout
Sample World-Cup-style 8-team bracket.
Tournament bracketTournament — tennis quarterfinals
Grand-slam-style quarterfinals to final.
Tournament bracketTournament — chess candidates
Chess knockout candidate-style bracket.
Tournament bracketTournament — Sweet 8 bracket
College basketball 8-team bracket.
Tournament bracketItalian Game (Chess)
Position after 1.e4 e5 2.Nf3 Nc6 3.Bc4.
Chess (FEN)Key Chords (Chord Wheel)
The primary chords of C major on the cycle of fifths.
Music chords (cycle of fifths)Workout Streak (Calendar Heatmap)
Training days through the year.
Calendar HeatmapFloor Plan 3D — One-Bedroom Flat, 52.5 m² (isometric)
A 52.5 m² one-bedroom flat in isometric: an open-plan living-kitchen across the full depth, a 13 m² double bedroom, a bathroom and an L-shaped hall, with every door and window placed on its wall. The four stated room areas are computed from the wall positions and sum to the gross internal area.
Floor plan (3D)Floor Plan 3D — Two-Surgery Dental Practice (isometric)
A 96 m² single-storey dental practice: reception and waiting, two 15.8 m² surgeries on the street side, a corridor, and behind it the decontamination room, staff room, accessible WC and plant store that a clinic needs. Room areas are taken from the wall grid and sum to 96 m².
Floor plan (3D)Floor Plan 3D — Café With Servery and Kitchen (plan view)
A 126 m² café drawn from above: a 54 m² dining room with eight tables for four, a servery open to it across the counter, a kitchen with a rear service door, and two WCs, a dry store and a lobby behind a back-of-house wall. Areas sum to the 14 × 9 m shell.
Floor plan (3D)Floor Plan 3D — Two-Bedroom Flat, 72 m² (isometric)
A 72 m² two-bedroom flat in isometric: a 24.6 m² living-kitchen, a 15 m² main bedroom and a 10.4 m² second bedroom off a short corridor, an entrance lobby, a bathroom and a store. Seven room areas, each computed from the walls, add up to the 9 × 8 m footprint.
Floor plan (3D)3D Viewer — School Science Laboratory Suite
A 120 m² secondary-school science suite to orbit in 3D: a 72 m² teaching laboratory with four island benches and a fume cupboard, a prep room on the corridor side, a lockable chemical store and a technician's office. Room areas follow from the wall grid and sum to the footprint.
Floor plan (3D WebGL)3D Viewer — Primary Classroom With Group Room and Cloakroom
A 99 m² primary-school classroom base in 3D: a 56 m² classroom for thirty pupils at six tables, a group room for small-group teaching, pupil WCs, a cloakroom entrance, a store and a plant cupboard. Six room areas computed from the walls sum to the 11 × 9 m plan.
Floor plan (3D WebGL)3D Viewer — Family House Ground Floor, 80 m²
The ground floor of a detached family house in 3D: a 27 m² kitchen-diner, a living room opening to the garden through bi-fold doors, a study at the front, the hall and stairs, a utility room with a back door, and a cloakroom WC. Areas sum to the 10 × 8 m footprint.
Floor plan (3D WebGL)3D Viewer — Coworking Floor With Meeting Room and Booths
A 180 m² coworking floor to fly around: 110 m² of open desks and a lounge, a 28 m² meeting room, a phone booth and a focus booth, a store, and a 28 m² kitchen and social space. Every room area is computed from the wall grid and the six sum to the floor plate.
Floor plan (3D WebGL)Music — Mary Had a Little Lamb (eight bars, C major)
The complete eight-bar melody in C major and 4/4, written with quarter, half and whole notes only — every bar holds exactly four beats, which the engine checks — so it doubles as a first note-reading exercise on the treble staff (E, D, C, G around the bottom of the stave).
Music notationMusic — Frère Jacques, Bars 1–6 (F major round)
The first six bars of the traditional round in F major and 4/4: the opening call twice, the rising answer to the half-note C, and the running eighth-note phrase. B♭ is written on every B because the engine draws the key name rather than a key signature, and each bar sums to four beats.
Music notationMusic — G Major Scale, One Octave Up and Down
The G major scale from G4 to G5 and back in quarter notes, with the one sharp — F♯ — marked where it falls (the leading note, a semitone below the tonic). A scale-degree warm-up that shows why G major's key signature carries a single sharp.
Music notationMusic — A Harmonic Minor Scale (raised seventh)
A harmonic minor ascending and descending: the natural minor's notes with the seventh raised to G♯, which creates the augmented second F–G♯ that gives the scale its sound and supplies the leading note for the dominant chord E major.
Music notationMusic — Minuet in G (BWV Anh. 114), Opening Four Bars
The right-hand melody of the opening four bars of the Minuet in G from the Notebook for Anna Magdalena Bach (attributed to Christian Petzold) in 3/4: a quarter note followed by four running eighths, then the leap down to the repeated G. Each bar sums to three beats, as the engine verifies.
Music notationChords — Full 12-Bar Blues in A (I7–IV7–V7)
All twelve bars of the standard blues form in A with dominant sevenths on every degree: four bars of I7, two of IV7, two of I7, then the V7–IV7–I7–V7 turnaround that sends the form back to the top. One chord card per bar.
Music chords (cycle of fifths)Chords — Andalusian Cadence in A Minor (i–♭VII–♭VI–V)
The descending flamenco progression Am–G–F–E: the bass walks down A–G–F–E by step and lands on the major dominant E, whose G♯ is borrowed from the harmonic minor. Numerals are relative to A minor, so the two middle chords are ♭VII and ♭VI.
Music chords (cycle of fifths)Chords — Pachelbel's Canon Progression in D
The eight-chord ground of Pachelbel's Canon in D major — I–V–vi–iii–IV–I–IV–V — whose bass falls by fourths and rises by seconds. The same chain of diatonic chords sits under a long list of later songs, which is why it is taught as a pattern rather than a piece.
Music chords (cycle of fifths)Chords — Minor ii–V–i in C Minor (half-diminished ii)
The minor-key jazz cadence Dm7♭5–G7–Cm7: the ii chord is half-diminished (iiø7) because D–F–A♭–C is built from C minor, and the V7 takes the raised leading note B♮ from the harmonic minor before resolving to the tonic minor seventh.
Music chords (cycle of fifths)Chords — Closely Related Keys of D Major on the Circle of Fifths
The six keys one accidental or fewer away from D major, highlighted on the circle of fifths: D, its neighbours A and G, and their relative minors B minor, F♯ minor and E minor. These are the keys a piece in D most often modulates to.
Music chords (cycle of fifths)Piano Roll — Bach, Prelude in C Major BWV 846, Bars 1–4
The opening four bars of the first prelude of The Well-Tempered Clavier, Book I: each half-bar holds a bass note for two beats and the second note from the second sixteenth, while the upper three notes arpeggiate twice. The harmony — C, Dm7/C, G7/B, C — is legible as the stacked colours.
Piano roll (MIDI)Piano Roll — Ode to Joy With a Tonic–Dominant Bass
Beethoven's Ode to Joy theme in C major, both four-bar phrases, with the dotted-quarter-and-eighth rhythm at each cadence that a staff with no dots cannot show. The left hand alternates C and G in half notes — tonic and dominant — and the second phrase closes on C where the first stopped on the dominant's D.
Piano roll (MIDI)Piano Roll — Pachelbel's Canon in D, Ground Bass and First Entry
Two statements of the eight-note ground bass D–A–B–F♯–G–D–G–A with its chords, the second joined by the first violin's descending line F♯–E–D–C♯–B–A–B–C♯ — each melody note a chord tone of the harmony beneath it, which is what makes the canon work.
Piano roll (MIDI)Piano Roll — Two-Bar Rock Beat on the General MIDI Drum Map
A standard two-bar rock groove as it appears in a DAW's drum lane, using General MIDI percussion notes: closed hi-hat (F♯2, note 42) on every eighth, kick (C2, note 36) on beats 1 and 3 plus the eighth after 3, snare (D2, note 38) on the backbeats 2 and 4, and a crash (C♯3, note 49) on the downbeat.
Piano roll (MIDI)