{"id":885,"date":"2026-09-27T16:01:30","date_gmt":"2026-09-27T16:01:30","guid":{"rendered":"https:\/\/networkyy.com\/diagram-as-code-manual-control-reladraw\/"},"modified":"2026-09-27T16:01:30","modified_gmt":"2026-09-27T16:01:30","slug":"diagram-as-code-manual-control-reladraw","status":"publish","type":"post","link":"https:\/\/networkyy.com\/fr\/diagram-as-code-manual-control-reladraw\/","title":{"rendered":"Diagram-as-Code With Manual Control: Beyond Auto-Layout and GUI Tools"},"content":{"rendered":"<figure><img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/965345\/pexels-photo-965345.jpeg?auto=compress&#038;cs=tinysrgb&#038;dpr=2&#038;h=650&#038;w=940\" alt=\"Diagram-as-Code With Manual Control: Beyond Auto-Layout and GUI Tools\" style=\"width:100%;height:auto;border-radius:8px;margin-bottom:24px;\" \/><figcaption>Photo by Markus Spiske on Pexels<\/figcaption><\/figure>\n<h1>Diagram-as-Code With Manual Control: Beyond Auto-Layout and GUI Tools<\/h1>\n<p>A fresh project called Reladraw just hit Hacker News, and it&#8217;s solving a problem every technical professional has felt: you want the efficiency of code-based diagrams like Mermaid or Graphviz, but you&#8217;re tired of fighting their auto-layout algorithms. At the same time, GUI tools like Draw.io give you pixel-perfect control but eat up enormous amounts of time. Reladraw introduces a third path\u2014a diagram language that lets you write in code yet explicitly control where every element lands. This isn&#8217;t just another tool announcement; it&#8217;s a lens into how modern infrastructure teams are rethinking visual documentation workflows.<\/p>\n<p>Let&#8217;s use this moment to explore the practical skill of building maintainable, version-controlled diagrams that don&#8217;t sacrifice precision. Whether you&#8217;re documenting cloud architectures, network topologies, or data flows, understanding when to use declarative syntax versus imperative positioning can transform how your team collaborates.<\/p>\n<h2>Table of Contents<\/h2>\n<ul>\n<li><a href=\"#the-layout-control-spectrum\">The Layout Control Spectrum<\/a><\/li>\n<li><a href=\"#why-manual-positioning-matters\">Why Manual Positioning Matters for IT Documentation<\/a><\/li>\n<li><a href=\"#reladraw-syntax-walkthrough\">Reladraw Syntax Walkthrough<\/a><\/li>\n<li><a href=\"#practical-use-cases\">Practical Use Cases for Infrastructure Teams<\/a><\/li>\n<li><a href=\"#integrating-into-workflows\">Integrating Diagram-as-Code Into Your Workflow<\/a><\/li>\n<\/ul>\n<h2 id=\"the-layout-control-spectrum\">The Layout Control Spectrum<\/h2>\n<p>Most diagram tools land on a spectrum. On one end, you have pure auto-layout engines. Graphviz and Mermaid parse your relationships and decide everything\u2014node placement, edge routing, spacing. They&#8217;re fast for simple flowcharts but become unpredictable when you need to mirror an actual network rack layout or keep a specific service cluster visually grouped. You end up tweaking node order in code, hoping the engine interprets your intent, which is frustrating when your diagram needs to communicate precise physical or logical arrangements.<\/p>\n<p>On the other end sits GUI software. Draw.io, Lucidchart, Visio\u2014these give you absolute control. Drag a load balancer icon five pixels left, nudge an arrow, align three boxes. But that control comes at a cost: diagrams become binary blobs or proprietary formats. Diffing changes in version control is nearly impossible. Collaboration requires shared accounts or export rituals. And if you&#8217;re building automation or CI pipelines that generate or validate architecture diagrams, GUI tools are essentially off the table.<\/p>\n<p>Reladraw occupies the middle ground. You write declarative syntax for shapes and connections, but you also specify coordinates. Think of it as SVG with a higher-level abstraction tailored for technical diagrams. This matters because modern infrastructure is code-first, and diagrams are documentation\u2014they should live in the same Git repositories, go through the same review processes, and update alongside your Terraform or Kubernetes manifests.<\/p>\n<div style=\"background:#fef3c7;border-left:4px solid #f59e0b;padding:14px 18px;border-radius:6px;margin:20px 0;\"><strong>\ud83d\udca1 Pro Tip:<\/strong> Store your diagram source files in the same repo as your infrastructure code. When you update a network design, the diagram diff shows reviewers exactly what changed visually without opening a separate tool.<\/div>\n<h2 id=\"why-manual-positioning-matters\">Why Manual Positioning Matters for IT Documentation<\/h2>\n<p>When you&#8217;re diagramming a Kubernetes cluster, the physical positioning carries semantic weight. Placing all control plane components at the top, worker nodes in the middle, and external ingress at the bottom mirrors mental models your team already uses. Auto-layout might scatter those elements based on graph theory, not operational reality.<\/p>\n<p>Consider network topology diagrams. A three-tier architecture\u2014web, app, database\u2014is understood top-to-bottom by convention. If an auto-layout engine decides to arrange those tiers horizontally or zigzag them based on edge weights, your diagram becomes harder to parse. Manual positioning preserves industry conventions and team-specific layout standards. This is why senior architects often sketch on whiteboards first: the spatial reasoning matters.<\/p>\n<p>Another angle: agent and LLM manipulation. As the Reladraw author noted, GUI tools are inefficient for programmatic manipulation. If you&#8217;re generating compliance diagrams from inventory APIs or auto-updating architecture visuals from service mesh telemetry, you need a format that&#8217;s both human-readable and machine-writable. Plain text with explicit coordinates hits that sweet spot. Platforms like <a href=\"https:\/\/imp.i384100.net\/zxbRDr\" target=\"_blank\" rel=\"nofollow sponsored noopener\">Coursera<\/a> are starting to include courses on infrastructure-as-code documentation practices, recognizing that diagrams are first-class artifacts in DevOps pipelines.<\/p>\n<h2 id=\"reladraw-syntax-walkthrough\">Reladraw Syntax Walkthrough<\/h2>\n<p>Let&#8217;s look at a minimal Reladraw example\u2014a classic three-tier web architecture. The syntax is approachable: you define nodes with types, labels, and x\/y coordinates, then edges with explicit routing if needed.<\/p>\n<pre><code>\/\/ Three-tier web application architecture\nnode loadBalancer at (50, 20) {\n  type: cloud\n  label: \"AWS ALB\"\n}\n\nnode webServer1 at (20, 60) {\n  type: rectangle\n  label: \"Web Server 1\"\n}\n\nnode webServer2 at (80, 60) {\n  type: rectangle\n  label: \"Web Server 2\"\n}\n\nnode database at (50, 100) {\n  type: cylinder\n  label: \"PostgreSQL\"\n}\n\nedge loadBalancer -> webServer1\nedge loadBalancer -> webServer2\nedge webServer1 -> database\nedge webServer2 -> database\n<\/code><\/pre>\n<p>Notice how the y-coordinate increases downward (20, 60, 100), creating a clear top-to-bottom flow. The x-coordinates spread the web servers horizontally while centering the load balancer and database. This is intentional design, not algorithmic accident. If you need to add a caching layer, you insert a new node at y=80, and the visual hierarchy remains intact.<\/p>\n<p>Compare this to a Mermaid equivalent, where you&#8217;d write relationships and hope the layout engine understands your intent. Reladraw&#8217;s explicitness is its strength. For IT professionals managing complex environments, that predictability is worth the extra coordinate specifications. If you&#8217;re still building skills in infrastructure visualization, <a href=\"https:\/\/datacamp.pxf.io\/YR9dQK\" target=\"_blank\" rel=\"nofollow sponsored noopener\">DataCamp<\/a> offers modules on data architecture diagramming that pair well with these diagram-as-code approaches.<\/p>\n<h3>Adding Detail and Styling<\/h3>\n<p>Real diagrams need more than boxes and lines. Reladraw supports styles, colors, and annotations. Here&#8217;s a more production-ready snippet showing a Kubernetes ingress flow with security zones:<\/p>\n<pre><code>\/\/ Kubernetes ingress with security zones\nnode internet at (50, 10) {\n  type: cloud\n  label: \"Internet\"\n  color: \"#e0e0e0\"\n}\n\nnode ingressController at (50, 40) {\n  type: rectangle\n  label: \"Ingress Controller\"\n  color: \"#4CAF50\"\n  style: \"bold\"\n}\n\nnode serviceMesh at (50, 70) {\n  type: hexagon\n  label: \"Service Mesh\"\n  color: \"#2196F3\"\n}\n\nnode apiPods at (50, 100) {\n  type: rectangle\n  label: \"API Pods (x3)\"\n  color: \"#FF9800\"\n}\n\n\/\/ Define security boundary\nzone dmz from (40, 30) to (60, 50) {\n  label: \"DMZ\"\n  color: \"#FFEB3B\"\n  opacity: 0.2\n}\n\nedge internet -> ingressController { label: \"HTTPS\" }\nedge ingressController -> serviceMesh { label: \"mTLS\" }\nedge serviceMesh -> apiPods { style: \"dashed\" }\n<\/code><\/pre>\n<p>The zone annotation creates a visual security boundary without cluttering the node definitions. This separation of concerns\u2014structure versus decoration\u2014makes diagrams easier to maintain. When your security team asks to highlight all DMZ components, you adjust zone definitions, not individual nodes.<\/p>\n<div style=\"background:#fef3c7;border-left:4px solid #f59e0b;padding:14px 18px;border-radius:6px;margin:20px 0;\"><strong>\u26a0\ufe0f Common Mistake:<\/strong> Don&#8217;t hard-code coordinates initially. Sketch rough placements first, then refine. Use a 100&#215;100 or 200&#215;200 grid mentally to avoid cramming elements. Leave room for future additions\u2014infrastructure always grows.<\/div>\n<h2 id=\"practical-use-cases\">Practical Use Cases for Infrastructure Teams<\/h2>\n<p>Where does this approach shine? Anywhere you need version-controlled, diff-able diagrams that also respect specific layouts.<\/p>\n<h3>Network Topology Documentation<\/h3>\n<p>Network engineers need diagrams that map to physical reality. A spine-leaf data center architecture has a specific visual structure\u2014spines at the top, leaves below, connections radiating outward. Auto-layout algorithms optimize for graph aesthetics, not network conventions. Reladraw lets you encode that structure directly, making diagrams that operations teams can trust as references during outages.<\/p>\n<h3>CI\/CD Pipeline Visualization<\/h3>\n<p>Your Jenkins or GitHub Actions pipeline has stages: build, test, deploy, verify. Representing this as a left-to-right flow with manual positioning ensures the diagram matches your mental model. When you add a new security scan stage, you insert it at the correct x-coordinate between test and deploy. The diff is obvious in code review\u2014both the syntax change and the visual shift are clear.<\/p>\n<h3>Cloud Architecture Reviews<\/h3>\n<p>Architecture decision records (ADRs) benefit from embedded diagrams. Storing those diagrams as Reladraw code means future you\u2014or future teammates\u2014can see exactly what changed between decision points. &#8220;We moved the NAT gateway from the public subnet to a dedicated transit subnet&#8221; becomes a one-line coordinate change plus a commit message, not a screenshot replacement.<\/p>\n<h2 id=\"integrating-into-workflows\">Integrating Diagram-as-Code Into Your Workflow<\/h2>\n<p>Adoption requires tooling. Reladraw is a new project, so the ecosystem is forming. The key workflow pieces you need: a command-line renderer that converts .rela files to SVG or PNG, Git integration for version control, and ideally a lightweight preview tool for quick iteration.<\/p>\n<p>Start by converting one critical diagram\u2014your production architecture or main service flow. Store the .rela file alongside your infrastructure code. Set up a CI job that regenerates the diagram on every commit and uploads it as a build artifact. This creates a living document: the diagram is always current because it&#8217;s generated from the same source of truth as your deployments.<\/p>\n<p>For teams already using docs-as-code approaches with Markdown and static site generators, Reladraw diagrams slot in naturally. Your documentation repository contains text, code snippets, and diagram source files. The build pipeline renders everything into a searchable knowledge base. When a developer updates a service, they update the diagram in the same pull request\u2014reviewers see both code and visual changes together.<\/p>\n<p>Another integration point: GitOps workflows. If you&#8217;re using ArgoCD or Flux, your Git repository defines desired state. Adding diagrams to that repository\u2014diagrams that show the desired architecture\u2014creates a powerful alignment. The code, the config, and the diagram all live together, versioned identically.<\/p>\n<div style=\"background:#f8f8f8;color:#555;padding:14px 18px;border-radius:8px;margin-top:32px;font-size:14px;line-height:1.6;\"><span style=\"color:#222;font-weight:600;\">Stay in the loop<\/span> \u2014 join 125,000+ IT professionals following Networkyy: <a href=\"https:\/\/www.instagram.com\/networkyy\" target=\"_blank\" style=\"color:#7c3aed;font-weight:600;text-decoration:none;\" rel=\"noopener\">Instagram<\/a> \u00b7 <a href=\"https:\/\/www.facebook.com\/ITnetworkyy\/\" target=\"_blank\" style=\"color:#7c3aed;font-weight:600;text-decoration:none;\" rel=\"noopener\">Facebook<\/a> \u00b7 <a href=\"https:\/\/www.threads.com\/@networkyy\" target=\"_blank\" style=\"color:#7c3aed;font-weight:600;text-decoration:none;\" rel=\"noopener\">Threads<\/a> \u00b7 <a href=\"https:\/\/medium.com\/@mattouchi6\" target=\"_blank\" style=\"color:#7c3aed;font-weight:600;text-decoration:none;\" rel=\"noopener\">Medium<\/a><\/div>\n<p>The real test of any diagram approach is whether it survives the chaos of real projects. GUI tools look polished initially but degrade as teams grow\u2014who has the latest version? Diagram-as-code with manual control handles that chaos. It&#8217;s text, it&#8217;s versioned, it&#8217;s diffable, and you decide the layout. Reladraw represents a maturation of this idea, acknowledging that full auto-layout isn&#8217;t always the answer. Sometimes you need to draw the damn box exactly where you know it belongs.<\/p>\n<p>If you&#8217;re serious about infrastructure documentation, experiment with this middle path. Pick a diagram that frustrates you\u2014one where Mermaid keeps rearranging nodes or where you&#8217;re tired of opening Draw.io. Rewrite it with explicit coordinates. Commit it. See how the code review process changes when your architecture is diffable text. That&#8217;s the unlock: treating visual documentation with the same rigor you apply to your infrastructure code, without sacrificing the clarity that intentional layout provides.<\/p>\n<div style=\"background:linear-gradient(135deg,#1e1b4b,#6d28d9 55%,#db2777);border-radius:16px;padding:30px 24px;text-align:center;box-shadow:0 10px 30px rgba(109,40,217,0.35);\">\n<div style=\"display:inline-block;background:#facc15;color:#1e1b4b;font-size:11px;font-weight:800;letter-spacing:0.5px;padding:5px 12px;border-radius:999px;margin-bottom:14px;\">\ud83d\udd25 RECOMMENDED FOR YOU<\/div>\n<h3 style=\"margin:0 0 10px;font-size:20px;color:#fff;font-weight:800;line-height:1.3;\">Master Infrastructure Documentation That Scales<\/h3>\n<p style=\"margin:0 0 20px;color:#e9d5ff;font-size:13.5px;line-height:1.6;\">Learn to build version-controlled, code-driven architecture diagrams alongside infrastructure-as-code practices that enterprise teams actually use in production environments.<\/p>\n<p><a href=\"https:\/\/imp.i384100.net\/zxbRDr\" target=\"_blank\" rel=\"nofollow sponsored noopener\" style=\"display:inline-block;background:#a3e635;color:#1e1b4b;font-weight:800;padding:13px 30px;border-radius:10px;font-size:14.5px;box-shadow:0 4px 14px rgba(163,230,53,0.5);text-decoration:none;\">Start Learning on Coursera \u2192<\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>Reladraw bridges the gap between rigid auto-layout diagrams and time-consuming GUI tools. Learn how to create precise, code-driven diagrams your way.<\/p>","protected":false},"author":2,"featured_media":884,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":"","_yoast_wpseo_title":"Diagram-as-Code With Manual Control: Beyond Auto-Layout and GUI Tools - Networkyy","_yoast_wpseo_metadesc":"Reladraw bridges the gap between rigid auto-layout diagrams and time-consuming GUI tools. Learn how to create precise, code-driven diagrams your way.","_yoast_wpseo_focuskw":"diagram as code","rank_math_title":"","rank_math_description":"","rank_math_focus_keyword":""},"categories":[1],"tags":[],"class_list":["post-885","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"contentshake_article_id":"","brizy_media":[],"_links":{"self":[{"href":"https:\/\/networkyy.com\/fr\/wp-json\/wp\/v2\/posts\/885","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/networkyy.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/networkyy.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/networkyy.com\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/networkyy.com\/fr\/wp-json\/wp\/v2\/comments?post=885"}],"version-history":[{"count":0,"href":"https:\/\/networkyy.com\/fr\/wp-json\/wp\/v2\/posts\/885\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/networkyy.com\/fr\/wp-json\/wp\/v2\/media\/884"}],"wp:attachment":[{"href":"https:\/\/networkyy.com\/fr\/wp-json\/wp\/v2\/media?parent=885"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/networkyy.com\/fr\/wp-json\/wp\/v2\/categories?post=885"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/networkyy.com\/fr\/wp-json\/wp\/v2\/tags?post=885"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}