DiagramHub · Gallery

Mermaid to Animated HTML

Live diagram ↗
Diagram source (application/json)
{
 "schema_version": 1,
 "diagram_type": "architecture",
 "meta": {
  "title": "mermaid to animated html: system diagram with api gateway, a"
 },
 "components": [
  {
   "id": "n1",
   "type": "backend",
   "label": "mermaid",
   "pos": [
    40,
    300
   ],
   "size": [
    150,
    60
   ]
  },
  {
   "id": "n2",
   "type": "backend",
   "label": "animated html: system diagram with api g",
   "pos": [
    260,
    300
   ],
   "size": [
    340,
    60
   ]
  },
  {
   "id": "n3",
   "type": "security",
   "label": "auth service",
   "pos": [
    670,
    300
   ],
   "size": [
    150,
    60
   ]
  },
  {
   "id": "n4",
   "type": "backend",
   "label": "cache",
   "pos": [
    890,
    300
   ],
   "size": [
    150,
    60
   ]
  },
  {
   "id": "n5",
   "type": "database",
   "label": "postgres that animates on load",
   "pos": [
    1110,
    300
   ],
   "size": [
    268,
    60
   ]
  }
 ],
 "connections": [
  {
   "from": "n1",
   "to": "n2"
  },
  {
   "from": "n2",
   "to": "n3"
  },
  {
   "from": "n3",
   "to": "n4"
  },
  {
   "from": "n4",
   "to": "n5"
  }
 ]
}

Published 2026-09-25T20:22:30.751Z · 779 KB self-contained · sha256 80ade871b8a20c5ea5956330481729f11a6d22d3979b98c552c714471678dcb3