editordocs · v0.1.0
introduction

What remaid is, and what it is not

A motion-first diagram-as-code tool. Architecture diagrams that explain movement, not just structure.

remaid takes a small text DSL and renders it as an animated SVG. The animation is a first-class part of the language, not an afterthought — you describe the static shape of a system and the way data moves through it in the same file.

Hello, motionDiagram with 3 nodes and 2 edges.requestINSERTWebAPIPostgres
A two-step packet flow. Source on the next page.

Most diagram tools sit at one of two extremes: static-but-typable (Mermaid, PlantUML, D2) or animated-but-visual (After Effects, Rive, Figma). The first kind is great for pull requests and version control but cannot show what a system actually does over time. The second kind is great for explaining behaviour but does not survive a code review.

remaid sits in the gap. The DSL diffs cleanly in git. The output works as a plain <img> tag in any markdown renderer or documentation site. The animation runs without JavaScript — it is native SMIL inside the SVG file.

It is good for:

  • Architecture diagrams that show traffic flow.
  • Tech-blog posts and DevRel content with embedded animations.
  • Internal docs explaining failover, replication, retry storms.
  • System onboarding materials.

It is not good for:

  • Sequence diagrams (lifelines + activation bars). That is a different rendering model. Use Mermaid for those.
  • Generic flowcharts with decision diamonds. remaid models nodes that process data and edges that carry data — there is no if/else primitive.
  • Whiteboarding or freeform sketching. The DSL is for committed designs, not exploration.
  • Anything 3D. Everything is 2D SVG.

remaid is open source under the Apache 2.0 license. The full source lives on GitHub.

next
Build your first diagram