{"uid":"cap_srWGPta5OlUPE2LnGk62G","slug":"agentic-diagrams-architecture-diagram-generator-116b5042","name":"Agentic Diagrams – Architecture Diagram Generator","description":"Generate a self-contained animated architecture diagram as HTML, SVG, MP4, WebM, GIF or PNG","url":"https://agentic-diagrams-production.up.railway.app/v1/diagrams?utm_source=zero.xyz","method":"POST","headers":{},"bodySchema":{"type":"object","properties":{"edges":{"type":"array","items":{"type":"object","required":["from","to"],"properties":{"to":{"type":"string"},"from":{"type":"string"},"label":{"type":"string","default":"","maxLength":60}},"additionalProperties":false},"default":[],"maxItems":120},"nodes":{"type":"array","items":{"type":"object","required":["id","label"],"properties":{"id":{"type":"string","pattern":"^[a-zA-Z0-9_-]{1,48}$"},"kind":{"type":"string","default":"component","maxLength":40},"label":{"type":"string","maxLength":120,"minLength":1},"detail":{"type":"string","default":"","maxLength":200},"status":{"enum":["working","ready","waiting","blocked","unknown"],"type":"string","default":"ready"}},"additionalProperties":false},"maxItems":60,"minItems":1},"style":{"enum":["orbital","circuit","ledger"],"type":"string","default":"circuit"},"title":{"type":"string","maxLength":120,"minLength":1},"export":{"type":"object","default":{},"properties":{"fps":{"anyOf":[{"type":"number","const":10},{"type":"number","const":20},{"type":"number","const":24},{"type":"number","const":25},{"type":"number","const":30}],"default":20},"width":{"type":"integer","default":1280,"maximum":1920,"minimum":320,"multipleOf":2},"height":{"type":"integer","default":720,"maximum":1080,"minimum":240,"multipleOf":2},"durationSeconds":{"type":"integer","default":6,"maximum":12,"minimum":1}},"additionalProperties":false},"format":{"enum":["html","svg","mp4","webm","gif","png"],"type":"string","default":"html"},"animated":{"type":"boolean","default":true},"colorScheme":{"anyOf":[{"enum":["dark","light"],"type":"string"},{"type":"object","properties":{"edge":{"type":"string","pattern":"^#[0-9a-fA-F]{6}$"},"grid":{"type":"string","pattern":"^#[0-9a-fA-F]{6}$"},"text":{"type":"string","pattern":"^#[0-9a-fA-F]{6}$"},"muted":{"type":"string","pattern":"^#[0-9a-fA-F]{6}$"},"accent":{"type":"string","pattern":"^#[0-9a-fA-F]{6}$"},"surface":{"type":"string","pattern":"^#[0-9a-fA-F]{6}$"},"statuses":{"type":"object","properties":{"ready":{"type":"string","pattern":"^#[0-9a-fA-F]{6}$"},"blocked":{"type":"string","pattern":"^#[0-9a-fA-F]{6}$"},"unknown":{"type":"string","pattern":"^#[0-9a-fA-F]{6}$"},"waiting":{"type":"string","pattern":"^#[0-9a-fA-F]{6}$"},"working":{"type":"string","pattern":"^#[0-9a-fA-F]{6}$"}},"additionalProperties":false},"background":{"type":"string","pattern":"^#[0-9a-fA-F]{6}$"}},"additionalProperties":false}],"default":"dark"}}},"responseSchema":null,"example":null,"exampleRequest":null,"tags":["x402"],"displayCostAmount":"0.1","displayCostAsset":"USDC","priceDynamic":false,"priceHint":null,"priceStatus":"priced","priceSource":"probe","requiresHandshake":false,"reviewCount":0,"rating":{"score":"0.00","successRate":"0.00","reviews":0,"stars":null,"state":"unrated"},"availabilityStatus":"unknown","priceObserved":null,"sessionDeposit":null,"pricing":{"kind":"static","summary":"$0.1/call","primary":{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.1","per":"call","confidence":"exact"},"accepted":[{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.1","per":"call","confidence":"exact"}]},"paymentMethods":[{"uid":"pm_TigvcmvVLjiRmXkwE6Wtj","protocol":"x402","methodType":"crypto","chain":"base","mode":"charge","costAmount":"0.1","costPer":"request","priority":0,"asset":"0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913","unit":"request","depositMicros":null,"planRef":null}],"brandName":null,"brandSlug":null,"brandBaseUrl":null,"brandDocsUrl":null,"whatItDoes":"Generates self-contained animated architecture diagrams as HTML, SVG, MP4, WebM, GIF, or PNG from a node/edge graph definition","exampleAgentPrompt":"Create an animated circuit-style architecture diagram in dark mode showing three nodes: an API Gateway (kind: gateway, status: working), a Payment Service (kind: service, status: working), and a Database (kind: database, status: ready), with edges from API Gateway to Payment Service labeled 'routes' and from Payment Service to Database labeled 'reads/writes' — export it as a 1280x720 HTML file with the title 'Payment Flow'.","exampleUseCases":[{"title":"Animated microservices overview for docs","prompt":"Make an animated dark-mode HTML diagram showing my microservices: Auth Service (working), Order Service (working), Inventory Service (ready), and Notification Service (waiting) — connect Auth to Order with 'authenticates', Order to Inventory with 'checks stock', and Order to Notification with 'triggers alert'. Title it 'Order Processing Architecture', circuit style, 1280x720."},{"title":"Infrastructure status GIF for a status page","prompt":"Generate a GIF of my infrastructure status diagram — nodes are Load Balancer (working), App Server A (working), App Server B (blocked), and PostgreSQL DB (ready). Connect Load Balancer to both App Servers, and both App Servers to the DB. Use dark color scheme, orbital style, 800x600, 6 seconds, 20 fps, title 'Live Infrastructure Status'."},{"title":"Data pipeline diagram for a presentation","prompt":"Create a 1280x720 PNG architecture diagram titled 'ML Data Pipeline' in light mode showing these stages: Data Ingestion (ready), Feature Engineering (working), Model Training (working), Model Registry (ready), and Serving API (ready) — connected in sequence with labeled edges like 'raw events', 'features', 'trained model', 'serves predictions'. Use ledger style, no animation."}],"resultDescription":"The endpoint returns the diagram as a binary or text payload in the requested format (HTML, SVG, MP4, WebM, GIF, or PNG). HTML and SVG are self-contained and embeddable. Video/image formats are binary files ready for download or display. The diagram visually represents the provided nodes with status indicators and edges with optional labels, rendered in the selected style and color scheme at the specified dimensions.","failureModes":["Invalid node ID pattern (must match ^[a-zA-Z0-9_-]{1,48}$) returns a 400 validation error","Too many nodes (>60) or edges (>120) returns a 400 error","Unsupported format enum value returns a 400 error","Dimensions not a multiple of 2 returns a 400 error","Payment not attached or insufficient USDC returns a 402 error","Rendering timeout for complex animated video exports may return a 500 error","Missing required node fields (id, label) returns a 400 error"],"whenToPreferThis":"Choose this endpoint when you need a programmatically generated, visually polished architecture or system diagram with animation support and multiple export formats — especially when the output needs to be embedded in a web page (HTML/SVG), shared as a video (MP4/WebM/GIF), or included in a report (PNG). It is ideal when you have a structured list of components and their connections and need a quick, self-contained visual without running a local diagramming tool. Prefer this over static SVG libraries when animation, status indicators, or video export is needed.","instructions":null,"reviewSummary":null,"reviewSummaryHighlights":null,"reviewSummaryConcerns":null,"reviewSummaryGeneratedAt":null,"activationCount":0,"lastUsedAt":null,"lastSuccessfullyRanAt":null,"lastHealthCheckAt":"2026-10-11T18:31:11.748Z","isFirstParty":false,"canonicalSlug":"agentic-diagrams-architecture-diagram-generator-116b5042"}