tool · open source

anigram

an animated draw.io for the cloud — the connection between two nodes is a typed, animated interaction. services don’t just connect; you watch them interact.

concept 01

the animation is the meaning

every diagramming tool stops at a static picture. draw.io can slide a generic dot along a line, but the dot means nothing — it’s decoration. anigram binds the motion to what the edge actually does: a service uploading to a bucket shows files streaming up the wire and the bucket filling; a worker draining a queue shows it drain.

watch the scene on the right — an api stores an upload, records an order, publishes an event, workers consume it. five different jobs, five visibly different motions. you can read the system without reading a single label.

the live demo sits out reduced motion — it's all movement.

microservices fan-out — distinct verbs, side by side

concept 02

semantic connections

nodes aren’t rectangles — they’re typed. a bucket knows it stores things, a queue knows it buffers them, a cdn knows it caches. wire two nodes together and anigram resolves the right interaction on its own: service → bucket is an upload, bucket → service is a download, service → database is a query. one click overrides it to anything else.

this scene shows a cdn warming its cache: hits, misses, and the fallback trip to origin — all resolved from the node types, none of it hand-animated.

the live demo sits out reduced motion — it's all movement.

cdn cache warm-up — hit, miss, origin fallback

concept 03

verbs, not arrows

an arrow says two things touch. a verb says what happens between them. anigram’s edges carry verbs — upload, download, query, publish, consume, cache, stream — and each one reads as its own motion, so a glance tells you what kind of system you’re looking at.

presentation mode turns the verbs into a story: it steps through a request path and lights the system up layer by layer. here’s a full oauth2 authorization-code flow telling itself.

the live demo sits out reduced motion — it's all movement.

oauth2 authorization code flow — a scripted step-through

where this goes

roadmap

anigram grows along two interleaving axes — neither finishes before the other starts, so no capability is ever stranded.

authoring ladder

  1. preset params
  2. visual composer
  3. code plugins
  4. pack marketplace

cloud intelligence

  1. static cloud pack
  2. terraform / iac import
  3. live connectors & metrics
  4. premium tier

phase 1

the living blueprint

the mvp you can play with below.

  • typed nodes + the interaction atom, with a semantic default-link resolver
  • declarative animation specs on a single rAF overlay
  • three flagship verbs — upload, download, query — auto-resolved from node types
  • small editor, localStorage persistence, versioned json import/export
  • curated scenes + presentation mode

phase 1.5

compose & extend

authoring without code.

  • visual composer — chain behaviors, attach reactions, save reusable presets
  • data-only community packs: new kinds, rules, sprites — zero code execution

phase 2

architecture-as-code

diagrams from real infrastructure.

  • terraform / cloudformation import with auto-layout
  • code plugin api in a sandbox — custom behaviors, never on the main thread

phase 3

live & enterprise

the diagram reacts to reality.

  • live connectors scan an environment and populate the canvas
  • live metrics — nodes vibrate at high cpu, edges flash red on 5xx
  • collaboration, secure embeds, a ci/cd action that redraws on infra change
  • pack marketplace

free

agpl-3.0
  • unlimited basic shapes
  • manual connections
  • standard animations

pro

$19–29/mo
  • high-res interactive embeds + gif export
  • unlimited diagrams
  • custom icons & themes

team

$99+/mo
  • live sync & collaboration
  • security-policy visualization
  • ci/cd integration

go on, break something

the playground

the full editor, embedded right here — drag kinds from the palette, wire them together, watch anigram pick the verb. your diagram autosaves in this browser.

● live playgrounddrag · connect · tune