{"id":2444,"date":"2026-05-29T03:58:48","date_gmt":"2026-05-29T03:58:48","guid":{"rendered":"https:\/\/ai-box.eu\/?p=2444"},"modified":"2026-05-29T04:03:30","modified_gmt":"2026-05-29T04:03:30","slug":"animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator","status":"publish","type":"post","link":"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/","title":{"rendered":"Animated Architecture Diagrams with D2 and ffmpeg \u2013 the Foundation for an AI-powered Diagram Generator"},"content":{"rendered":"<p>Anyone documenting complex infrastructures quickly hits the limits of static diagrams and MS PowerPoint as tools. A setup consisting of multiple machines, two different LANs and a handful of Docker containers can certainly be described in text with many sentences \u2013 but an animated diagram that actually shows the data flow is much faster for us humans to grasp. I wanted exactly that kind of solution: one that generates an <strong>animated architecture diagram<\/strong> from text. I want to be able to open the diagram directly in the browser, embed it in WordPress and also export it in different formats for LinkedIn &amp; Co, not just SVG.<\/p>\n<p>The long-term goal is a small web interface through which I can generate diagrams via an <strong>LLM chat dialog<\/strong>. The idea is that I describe my setup in natural language, the model generates the D2 code, and the result is displayed directly in my browser. The web interface will come in the second part of this short series. In this first post I am building the <strong>local rendering pipeline<\/strong>: from the D2 description through the animated SVG to the exported GIF.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/#Why_D2\" >Why D2?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/#Installation_on_Ubuntu\" >Installation on Ubuntu<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/#D2_Syntax_The_First_Diagram\" >D2 Syntax: The First Diagram<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/#Rendering_SVG_and_Viewing_it_in_the_Browser\" >Rendering SVG and Viewing it in the Browser<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/#Recording_an_Animated_SVG_as_MP4\" >Recording an Animated SVG as MP4<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/#Installing_Prerequisites\" >Installing Prerequisites<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/#The_recordjs_Pipeline\" >The record.js Pipeline<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/#Running_the_Script\" >Running the Script<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/#Converting_MP4_to_an_Animated_GIF\" >Converting MP4 to an Animated GIF<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/#What_Comes_Next\" >What Comes Next<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Why_D2\"><\/span>Why D2?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>There are many diagram tools, but most of them fail to meet at least one of my requirements: either they are cloud-dependent, not scriptable, or they only produce static output. <strong>D2<\/strong> meets all my requirements:<\/p>\n<ul>\n<li>Open Source (Mozilla Public License 2.0)<\/li>\n<li>Purely text-based and therefore ideal for LLMs, no GUI, no cloud, no dependencies after installation<\/li>\n<li>Native <strong>animated edges<\/strong> with <code>style.animated: true<\/code><\/li>\n<li>Automatic layout via dagre or ELK, which means I do not have to specify any pixel coordinates<\/li>\n<li>Runs entirely locally, making it ideal as a backend for a locally hosted LLM-driven generator<\/li>\n<\/ul>\n<p>The last point is the crucial one: because D2 is text-based, a local language model can generate the diagram code. The model only needs to master a simple declarative syntax rather than doing pixel arithmetic. However, the LLM used should be capable of deriving a diagram from a prose but technical description.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Installation_on_Ubuntu\"><\/span>Installation on Ubuntu<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>D2 is delivered as a <strong>standalone binary<\/strong>. The official install script downloads the appropriate release from GitHub and installs it to <code>~\/.local\/bin\/<\/code>:<\/p>\n<p><strong>Command:<\/strong> <code>curl -fsSL https:\/\/d2lang.com\/install.sh | sh -s --<\/code><\/p>\n<p>You can use the following command to check whether the installation worked.<\/p>\n<p><strong>Command:<\/strong> <code>~\/.local\/bin\/d2 version<\/code><\/p>\n<p>Anyone who does not want to run the script blindly can inspect it first using <code>--dry-run<\/code>:<\/p>\n<pre><code>curl -fsSL https:\/\/d2lang.com\/install.sh | sh -s -- --dry-run<\/code><\/pre>\n<p><strong>Important:<\/strong> D2 lands in <code>~\/.local\/bin\/<\/code>, not in <code>\/usr\/local\/bin\/<\/code>. Always use the full path <code>~\/.local\/bin\/d2<\/code> in scripts and agent skills, because systemd services often do not have <code>~\/.local\/bin\/<\/code> in their PATH variable.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"D2_Syntax_The_First_Diagram\"><\/span>D2 Syntax: The First Diagram<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The syntax of D2 is quickly learned. Nodes are simply declared, containers (e.g. for LAN zones) are nested using curly braces, and connections are defined with <code>-&gt;<\/code> or <code>&lt;-&gt;<\/code> \u2013 the direction is visible from the angle brackets. Animation is activated per edge with <code>style.animated: true<\/code>.<\/p>\n<p>Here is my current setup as an example. It covers three machines, two LANs and my local services:<\/p>\n<pre><code>direction: down\r\n\r\ntelegram: \"Telegram\\nControl channel\" {\r\n  style.fill: \"#f0f0f0\"\r\n  style.stroke: \"#aaaaaa\"\r\n}\r\n\r\nlanA: LAN 192.168.178.x {\r\n  optiplex: \"Dell OptiPlex 5040\\nNemoClaw + OpenShell egress\\n192.168.178.142\"\r\n  windows: \"Windows workstation\\n192.168.178.96\" {\r\n    style.fill: \"#f0f0f0\"\r\n  }\r\n}\r\n\r\nlanB: LAN 192.168.2.x {\r\n  firecrawl: \"Firecrawl  (A6000 Ada)\\n5 containers  \u00b7  port :3002\\n192.168.2.119\"\r\n  ollama: \"Ollama server  (A6000)\\nqwen3.6:27b  +  qwen3-embedding:4b\\n192.168.2.57:11434\" {\r\n    shape: cylinder\r\n  }\r\n  hermes: \"Hermes Agent\\nTelegram gateway\\n192.168.2.119\"\r\n}\r\n\r\nweb: \"The open web\\nScrape targets\" {\r\n  style.fill: \"#f0f0f0\"\r\n  style.stroke: \"#aaaaaa\"\r\n}\r\n\r\ntelegram &lt;-&gt; lanB.hermes: \"Tasks \u00b7 Replies\" {\r\n  style.animated: true\r\n}\r\nlanA.windows -&gt; lanA.optiplex: \"SSH -L 18789 tunnel\" {\r\n  style.animated: true\r\n  style.stroke-dash: 5\r\n}\r\nlanA.optiplex &lt;-&gt; lanB.firecrawl: \"Scrape \u00b7 :3002\" {\r\n  style.animated: true\r\n}\r\nlanB.firecrawl &lt;-&gt; lanB.ollama: \"\/v1  \u00b7  LLM + embeddings\" {\r\n  style.animated: true\r\n}\r\nlanB.hermes &lt;-&gt; lanB.firecrawl: \"Scrape request\" {\r\n  style.animated: true\r\n}\r\nlanB.hermes &lt;-&gt; lanB.ollama: \"LLM inference\" {\r\n  style.animated: true\r\n}\r\nlanB.firecrawl &lt;-&gt; web: \"Fetch pages\" {\r\n  style.animated: true\r\n}<\/code><\/pre>\n<p>Containers like <code>lanA<\/code> and <code>lanB<\/code> are automatically created by D2 as visual zones. D2 calculates the layout itself \u2013 I only specify the logical structure.<\/p>\n<p>If you now want to create a diagram yourself, save the example D2 syntax in a text file called e.g. <code>diagram.d2<\/code>. This file containing the diagram description then needs to be passed to D2 to generate the SVG file.<\/p>\n<div id=\"attachment_2440\" style=\"width: 910px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/ai-box.eu\/wp-content\/uploads\/2026\/05\/local-ai-stack-firecrawl-hermes-lan.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2440\" class=\"size-full wp-image-2440\" src=\"https:\/\/ai-box.eu\/wp-content\/uploads\/2026\/05\/local-ai-stack-firecrawl-hermes-lan.gif\" alt=\"local ai stack - firecrawl hermes agent\" width=\"900\" height=\"600\" \/><\/a><p id=\"caption-attachment-2440\" class=\"wp-caption-text\">local ai stack &#8211; firecrawl hermes agent<\/p><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Rendering_SVG_and_Viewing_it_in_the_Browser\"><\/span>Rendering SVG and Viewing it in the Browser<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A single command is enough to generate the animated SVG from the <code>diagram.d2<\/code> file:<\/p>\n<p><strong>Command:<\/strong> <code>~\/.local\/bin\/d2 diagram.d2 diagram.svg<\/code><\/p>\n<p>Anyone who wants to see the diagram live during editing can use <strong>watch mode<\/strong>. It starts a local server and automatically reloads the browser every time you save. In my case this unfortunately does not work, as I have no monitor connected to the machine and only work remotely via a terminal window.<\/p>\n<p><strong>Command:<\/strong> <code>~\/.local\/bin\/d2 --watch diagram.d2 diagram.svg<\/code><\/p>\n<p>The SVG can be embedded directly in WordPress as you can see here. The animation runs in the reader&#8217;s browser without any additional plugins or JavaScript.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Recording_an_Animated_SVG_as_MP4\"><\/span>Recording an Animated SVG as MP4<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>For platforms that cannot render SVG, a video is needed. I use <strong>Playwright<\/strong> with Headless Chromium for this: the browser loads the SVG and records the animation. Playwright stores the recording internally as <strong>WebM<\/strong> in a temporary folder, since WebM is Playwright&#8217;s native recording format. The <code>record.js<\/code> script immediately picks up this intermediate file and converts it in a single pass using ffmpeg. The only file that ends up in the working directory is the finished <code>output.mp4<\/code>. The WebM file is therefore just an internal intermediate step that I do not keep.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Installing_Prerequisites\"><\/span>Installing Prerequisites<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If you have not yet installed ffmpeg, you can do so with the following command on Ubuntu.<\/p>\n<p><strong>Command:<\/strong> <code>sudo apt install -y ffmpeg<\/code><\/p>\n<p>Now we create a folder in which we will save the animation from the SVG file as e.g. an MP4 file. This is also where our <code>record.js<\/code> script will live.<\/p>\n<p><strong>Command:<\/strong> <code>mkdir ~\/d2\/recorder &amp;&amp; cd ~\/d2\/recorder<\/code><\/p>\n<p><strong>Command:<\/strong> <code>npm init -y<\/code><\/p>\n<p><strong>Command:<\/strong> <code>npm install playwright<\/code><\/p>\n<p><strong>Command:<\/strong> <code>npx playwright install --with-deps chromium<\/code><\/p>\n<p>You have now installed the individual components needed to convert the SVG animation into e.g. an MP4 format.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"The_recordjs_Pipeline\"><\/span>The record.js Pipeline<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The last missing piece is the pipeline that creates the video from the SVG file. Create a JavaScript file named <code>record.js<\/code> in the <code>~\/d2\/recorder<\/code> subfolder we created above \u2013 the same folder where the <code>diagram.svg<\/code> and <code>diagram.d2<\/code> files are located.<\/p>\n<p>Copy the following content into this <code>record.js<\/code> file.<\/p>\n<pre><code>const { chromium } = require('playwright');\r\nconst path = require('path');\r\nconst fs = require('fs');\r\nconst { execSync } = require('child_process');\r\n\r\n(async () =&gt; {\r\n  const svgPath = path.resolve(process.argv[2] || '..\/diagram.svg');\r\n  const outFile  = process.argv[3] || 'output.mp4';\r\n  const SECONDS  = 6;\r\n  const W = 1200, H = 800;\r\n\r\n  fs.mkdirSync('_videos', { recursive: true });\r\n\r\n  const browser = await chromium.launch();\r\n  const ctx = await browser.newContext({\r\n    viewport: { width: W, height: H },\r\n    recordVideo: { dir: '_videos\/', size: { width: W, height: H } }\r\n  });\r\n\r\n  const page = await ctx.newPage();\r\n  await page.goto('file:\/\/' + svgPath);\r\n  await page.waitForTimeout(SECONDS * 1000);\r\n  await ctx.close();\r\n  await browser.close();\r\n\r\n  const webm = '_videos\/' + fs.readdirSync('_videos\/').find(f =&gt; f.endsWith('.webm'));\r\n  execSync(\r\n    `ffmpeg -y -i ${webm} ` +\r\n    `-vf \"scale=trunc(iw\/2)*2:trunc(ih\/2)*2\" ` +\r\n    `-c:v libx264 -movflags +faststart -pix_fmt yuv420p ${outFile}`\r\n  );\r\n\r\n  console.log('Done:', outFile);\r\n})();\r\n<\/code><\/pre>\n<p>It is important that you take a close look at the script and familiarise yourself with the variables, as this is where you can control the recording length and resolution.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Running_the_Script\"><\/span>Running the Script<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once the <code>record.js<\/code> file has been saved and a <code>diagram.svg<\/code> file already exists, you can run the pipeline.<\/p>\n<pre><code>node record.js ..\/diagram.svg output.mp4<\/code><\/pre>\n<p>The result is an <code>*.mp4<\/code> file in the current directory.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Converting_MP4_to_an_Animated_GIF\"><\/span>Converting MP4 to an Animated GIF<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>LinkedIn <strong>comments<\/strong> do not accept MP4 but do support many other formats such as GIF. An animated GIF is also often more practical than a video on other platforms. The conversion takes place in two steps: first generate an optimised <strong>colour palette<\/strong>, then render the GIF using it.<\/p>\n<p><strong>Step 1: Generate colour palette<\/strong><\/p>\n<p><strong>Command:<\/strong> <code>ffmpeg -i output.mp4 -vf \"fps=15,scale=900:-1:flags=lanczos,palettegen\" palette.png<\/code><\/p>\n<p><strong>Step 2: Render GIF using palette<\/strong><\/p>\n<p><strong>Command:<\/strong> <code>ffmpeg -i output.mp4 -i palette.png -filter_complex \"fps=15,scale=900:-1:flags=lanczos[x];[x][1:v]paletteuse\" output.gif<\/code><\/p>\n<p><strong>Important:<\/strong> Step 2 requires <code>-filter_complex<\/code> instead of <code>-vf<\/code>, because two input files are being processed. Using <code>-vf<\/code> causes ffmpeg to abort with an error.<\/p>\n<p>The result is a GIF of around 3\u20134 MB at 900 pixels wide and 15 fps. That is small enough for LinkedIn comments and sharp enough for the blog.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"What_Comes_Next\"><\/span>What Comes Next<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The pipeline is in place: D2 generates an animated SVG from a text-based description, Playwright records it as MP4, and ffmpeg exports it as a GIF. Every step runs entirely locally \u2013 no cloud service, no external API.<\/p>\n<p>In the next post I will build the <strong>web interface<\/strong> around it: an LLM chat dialog in which I describe my setup in natural language, the local model generates the D2 code from it, and the finished diagram appears directly in the browser. Export buttons for SVG, MP4 and GIF will be included.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Anyone documenting complex infrastructures quickly hits the limits of static diagrams and MS PowerPoint as tools. A setup consisting of multiple machines, two different LANs and a handful of Docker containers can certainly be described in text with many sentences \u2013 but an animated diagram that actually shows the data flow is much faster for [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2440,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[32,51,50],"tags":[1435,1436,1439,1401,1402,1442,1440,1417,1438,1406,1408,1444,1443,1031,1441,1437,1445,1407,1032,1409,92],"class_list":["post-2444","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai-pipeline-en","category-software-en","category-top-story-en","tag-animated-diagrams","tag-architecture-diagram","tag-create-gif","tag-d2","tag-d2-lang","tag-diagram-generator","tag-export-mp4","tag-ffmpeg","tag-ffmpeg-animated-gif","tag-ffmpeg-gif","tag-headless-chromium","tag-infrastructure-visualization","tag-llm-diagram","tag-local-ai","tag-local-pipeline","tag-network-diagram","tag-open-source-diagram-tool","tag-playwright","tag-sovereign-ai","tag-svg-animation","tag-ubuntu-en","et-has-post-format-content","et_post_format-et-post-format-standard"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Animated Architecture Diagrams with D2 and ffmpeg \u2013 the Foundation for an AI-powered Diagram Generator - Exploring the Future: Inside the AI Box<\/title>\n<meta name=\"description\" content=\"Learn how to build a local pipeline for animated architecture diagrams using D2, Playwright and ffmpeg \u2013 from SVG to exported GIF. No cloud required.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animated Architecture Diagrams with D2 and ffmpeg \u2013 the Foundation for an AI-powered Diagram Generator - Exploring the Future: Inside the AI Box\" \/>\n<meta property=\"og:description\" content=\"Learn how to build a local pipeline for animated architecture diagrams using D2, Playwright and ffmpeg \u2013 from SVG to exported GIF. No cloud required.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/\" \/>\n<meta property=\"og:site_name\" content=\"Exploring the Future: Inside the AI Box\" \/>\n<meta property=\"article:published_time\" content=\"2026-05-29T03:58:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-29T04:03:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ai-box.eu\/wp-content\/uploads\/2026\/05\/local-ai-stack-firecrawl-hermes-lan.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Maker\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Ingmar_Stapel\" \/>\n<meta name=\"twitter:site\" content=\"@Ingmar_Stapel\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Maker\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ai-box.eu\\\/en\\\/top-story-en\\\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\\\/2444\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ai-box.eu\\\/en\\\/top-story-en\\\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\\\/2444\\\/\"},\"author\":{\"name\":\"Maker\",\"@id\":\"https:\\\/\\\/ai-box.eu\\\/en\\\/#\\\/schema\\\/person\\\/cc91d08618b3feeef6926591b465eab1\"},\"headline\":\"Animated Architecture Diagrams with D2 and ffmpeg \u2013 the Foundation for an AI-powered Diagram Generator\",\"datePublished\":\"2026-05-29T03:58:48+00:00\",\"dateModified\":\"2026-05-29T04:03:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ai-box.eu\\\/en\\\/top-story-en\\\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\\\/2444\\\/\"},\"wordCount\":1146,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/ai-box.eu\\\/en\\\/top-story-en\\\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\\\/2444\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ai-box.eu\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/local-ai-stack-firecrawl-hermes-lan.gif\",\"keywords\":[\"animated diagrams\",\"architecture diagram\",\"create GIF\",\"D2\",\"D2 lang\",\"diagram generator\",\"export MP4\",\"FFMPEG\",\"ffmpeg animated GIF\",\"ffmpeg GIF\",\"Headless Chromium\",\"infrastructure visualization\",\"LLM diagram\",\"local AI\",\"local pipeline\",\"network diagram\",\"open source diagram tool\",\"Playwright\",\"sovereign AI\",\"SVG Animation\",\"Ubuntu\"],\"articleSection\":[\"AI Pipeline\",\"Software\",\"Top story\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ai-box.eu\\\/en\\\/top-story-en\\\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\\\/2444\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ai-box.eu\\\/en\\\/top-story-en\\\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\\\/2444\\\/\",\"url\":\"https:\\\/\\\/ai-box.eu\\\/en\\\/top-story-en\\\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\\\/2444\\\/\",\"name\":\"Animated Architecture Diagrams with D2 and ffmpeg \u2013 the Foundation for an AI-powered Diagram Generator - Exploring the Future: Inside the AI Box\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ai-box.eu\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ai-box.eu\\\/en\\\/top-story-en\\\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\\\/2444\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ai-box.eu\\\/en\\\/top-story-en\\\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\\\/2444\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ai-box.eu\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/local-ai-stack-firecrawl-hermes-lan.gif\",\"datePublished\":\"2026-05-29T03:58:48+00:00\",\"dateModified\":\"2026-05-29T04:03:30+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/ai-box.eu\\\/en\\\/#\\\/schema\\\/person\\\/cc91d08618b3feeef6926591b465eab1\"},\"description\":\"Learn how to build a local pipeline for animated architecture diagrams using D2, Playwright and ffmpeg \u2013 from SVG to exported GIF. No cloud required.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ai-box.eu\\\/en\\\/top-story-en\\\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\\\/2444\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ai-box.eu\\\/en\\\/top-story-en\\\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\\\/2444\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ai-box.eu\\\/en\\\/top-story-en\\\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\\\/2444\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ai-box.eu\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/local-ai-stack-firecrawl-hermes-lan.gif\",\"contentUrl\":\"https:\\\/\\\/ai-box.eu\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/local-ai-stack-firecrawl-hermes-lan.gif\",\"width\":900,\"height\":600,\"caption\":\"local ai stack - firecrawl hermes agent\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ai-box.eu\\\/en\\\/top-story-en\\\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\\\/2444\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Start\",\"item\":\"https:\\\/\\\/ai-box.eu\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animated Architecture Diagrams with D2 and ffmpeg \u2013 the Foundation for an AI-powered Diagram Generator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ai-box.eu\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/ai-box.eu\\\/en\\\/\",\"name\":\"Exploring the Future: Inside the AI Box\",\"description\":\"Inside the AI Box, we share our experiences and discoveries in the world of artificial intelligence.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ai-box.eu\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ai-box.eu\\\/en\\\/#\\\/schema\\\/person\\\/cc91d08618b3feeef6926591b465eab1\",\"name\":\"Maker\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e96b93fc3c7e50c1f21c5c6b1f146dc4867936141360830b328947b32cacf93a?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e96b93fc3c7e50c1f21c5c6b1f146dc4867936141360830b328947b32cacf93a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e96b93fc3c7e50c1f21c5c6b1f146dc4867936141360830b328947b32cacf93a?s=96&d=mm&r=g\",\"caption\":\"Maker\"},\"description\":\"I live in Bavaria near Munich. In my head I always have many topics and try out especially in the field of Internet new media much in my spare time. I write on the blog because it makes me fun to report about the things that inspire me. I am happy about every comment, about suggestion and very about questions.\",\"sameAs\":[\"https:\\\/\\\/ai-box.eu\"],\"url\":\"https:\\\/\\\/ai-box.eu\\\/en\\\/author\\\/ingmars\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Animated Architecture Diagrams with D2 and ffmpeg \u2013 the Foundation for an AI-powered Diagram Generator - Exploring the Future: Inside the AI Box","description":"Learn how to build a local pipeline for animated architecture diagrams using D2, Playwright and ffmpeg \u2013 from SVG to exported GIF. No cloud required.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/","og_locale":"en_US","og_type":"article","og_title":"Animated Architecture Diagrams with D2 and ffmpeg \u2013 the Foundation for an AI-powered Diagram Generator - Exploring the Future: Inside the AI Box","og_description":"Learn how to build a local pipeline for animated architecture diagrams using D2, Playwright and ffmpeg \u2013 from SVG to exported GIF. No cloud required.","og_url":"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/","og_site_name":"Exploring the Future: Inside the AI Box","article_published_time":"2026-05-29T03:58:48+00:00","article_modified_time":"2026-05-29T04:03:30+00:00","og_image":[{"url":"https:\/\/ai-box.eu\/wp-content\/uploads\/2026\/05\/local-ai-stack-firecrawl-hermes-lan.gif","width":900,"height":600,"type":"image\/gif"}],"author":"Maker","twitter_card":"summary_large_image","twitter_creator":"@Ingmar_Stapel","twitter_site":"@Ingmar_Stapel","twitter_misc":{"Written by":"Maker","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/#article","isPartOf":{"@id":"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/"},"author":{"name":"Maker","@id":"https:\/\/ai-box.eu\/en\/#\/schema\/person\/cc91d08618b3feeef6926591b465eab1"},"headline":"Animated Architecture Diagrams with D2 and ffmpeg \u2013 the Foundation for an AI-powered Diagram Generator","datePublished":"2026-05-29T03:58:48+00:00","dateModified":"2026-05-29T04:03:30+00:00","mainEntityOfPage":{"@id":"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/"},"wordCount":1146,"commentCount":0,"image":{"@id":"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/#primaryimage"},"thumbnailUrl":"https:\/\/ai-box.eu\/wp-content\/uploads\/2026\/05\/local-ai-stack-firecrawl-hermes-lan.gif","keywords":["animated diagrams","architecture diagram","create GIF","D2","D2 lang","diagram generator","export MP4","FFMPEG","ffmpeg animated GIF","ffmpeg GIF","Headless Chromium","infrastructure visualization","LLM diagram","local AI","local pipeline","network diagram","open source diagram tool","Playwright","sovereign AI","SVG Animation","Ubuntu"],"articleSection":["AI Pipeline","Software","Top story"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/","url":"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/","name":"Animated Architecture Diagrams with D2 and ffmpeg \u2013 the Foundation for an AI-powered Diagram Generator - Exploring the Future: Inside the AI Box","isPartOf":{"@id":"https:\/\/ai-box.eu\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/#primaryimage"},"image":{"@id":"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/#primaryimage"},"thumbnailUrl":"https:\/\/ai-box.eu\/wp-content\/uploads\/2026\/05\/local-ai-stack-firecrawl-hermes-lan.gif","datePublished":"2026-05-29T03:58:48+00:00","dateModified":"2026-05-29T04:03:30+00:00","author":{"@id":"https:\/\/ai-box.eu\/en\/#\/schema\/person\/cc91d08618b3feeef6926591b465eab1"},"description":"Learn how to build a local pipeline for animated architecture diagrams using D2, Playwright and ffmpeg \u2013 from SVG to exported GIF. No cloud required.","breadcrumb":{"@id":"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/#primaryimage","url":"https:\/\/ai-box.eu\/wp-content\/uploads\/2026\/05\/local-ai-stack-firecrawl-hermes-lan.gif","contentUrl":"https:\/\/ai-box.eu\/wp-content\/uploads\/2026\/05\/local-ai-stack-firecrawl-hermes-lan.gif","width":900,"height":600,"caption":"local ai stack - firecrawl hermes agent"},{"@type":"BreadcrumbList","@id":"https:\/\/ai-box.eu\/en\/top-story-en\/animated-architecture-diagrams-with-d2-and-ffmpeg-the-foundation-for-an-ai-powered-diagram-generator\/2444\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Start","item":"https:\/\/ai-box.eu\/en\/"},{"@type":"ListItem","position":2,"name":"Animated Architecture Diagrams with D2 and ffmpeg \u2013 the Foundation for an AI-powered Diagram Generator"}]},{"@type":"WebSite","@id":"https:\/\/ai-box.eu\/en\/#website","url":"https:\/\/ai-box.eu\/en\/","name":"Exploring the Future: Inside the AI Box","description":"Inside the AI Box, we share our experiences and discoveries in the world of artificial intelligence.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ai-box.eu\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/ai-box.eu\/en\/#\/schema\/person\/cc91d08618b3feeef6926591b465eab1","name":"Maker","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e96b93fc3c7e50c1f21c5c6b1f146dc4867936141360830b328947b32cacf93a?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e96b93fc3c7e50c1f21c5c6b1f146dc4867936141360830b328947b32cacf93a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e96b93fc3c7e50c1f21c5c6b1f146dc4867936141360830b328947b32cacf93a?s=96&d=mm&r=g","caption":"Maker"},"description":"I live in Bavaria near Munich. In my head I always have many topics and try out especially in the field of Internet new media much in my spare time. I write on the blog because it makes me fun to report about the things that inspire me. I am happy about every comment, about suggestion and very about questions.","sameAs":["https:\/\/ai-box.eu"],"url":"https:\/\/ai-box.eu\/en\/author\/ingmars\/"}]}},"_links":{"self":[{"href":"https:\/\/ai-box.eu\/en\/wp-json\/wp\/v2\/posts\/2444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ai-box.eu\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai-box.eu\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai-box.eu\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai-box.eu\/en\/wp-json\/wp\/v2\/comments?post=2444"}],"version-history":[{"count":3,"href":"https:\/\/ai-box.eu\/en\/wp-json\/wp\/v2\/posts\/2444\/revisions"}],"predecessor-version":[{"id":2450,"href":"https:\/\/ai-box.eu\/en\/wp-json\/wp\/v2\/posts\/2444\/revisions\/2450"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ai-box.eu\/en\/wp-json\/wp\/v2\/media\/2440"}],"wp:attachment":[{"href":"https:\/\/ai-box.eu\/en\/wp-json\/wp\/v2\/media?parent=2444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai-box.eu\/en\/wp-json\/wp\/v2\/categories?post=2444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai-box.eu\/en\/wp-json\/wp\/v2\/tags?post=2444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}