--- title: D2: like Mermaid, but better. Syntax, installation, and... description: D2 is an open-source, text-based diagramming tool positioned as an alternative to Mermaid for architectural diagrams. The guide covers D2's declarative syntax... canonical: https://daily.dev/posts/d2-like-mermaid-but-better-syntax-installation-and-practical-usage-tips-h63ymk1ba twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: D2: like Mermaid, but better. Syntax, installation, and practical usage tips | daily.dev og:description: D2 is an open-source, text-based diagramming tool positioned as an alternative to Mermaid for architectural diagrams. The guide covers D2's declarative syntax... og:url: https://daily.dev/posts/d2-like-mermaid-but-better-syntax-installation-and-practical-usage-tips-h63ymk1ba og:image: https://api.daily.dev/og/posts/h63yMk1BA.png og:image:alt: D2: like Mermaid, but better. Syntax, installation, and practical usage tips og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # D2: like Mermaid, but better. Syntax, installation, and practical usage tips **[Code4IT](https://daily.dev/sources/code4it)** · 13 min read · 0 upvotes · 0 comments ## Summary D2 is an open-source, text-based diagramming tool positioned as an alternative to Mermaid for architectural diagrams. The guide covers D2's declarative syntax for elements, grouping, connections, SQL table schemas, installation on Windows/macOS/Docker, usage via CLI, VS Code extension, and Obsidian integration. It also shares practical tips like separating element and connection definitions, using color themes, choosing between DAGRE/ELK/TALA layout engines, and using variables for maintainability. A closing comparison notes D2 offers more styling flexibility, multiple-instance markers, SQL tables, markdown, and variables, while Mermaid has broader built-in platform support and more diagram types. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I mark a component in a D2 diagram as having multiple instances? Set the style.multiple property to true on the element definition, for example 'be: BackEnd { style.multiple: true }'. This renders the element as a stack to represent multiple instances of the same service without manually duplicating nodes, which is useful for showing replicated services like backend instances behind a gateway. _daily.dev surfaces practical D2 syntax tips for developers documenting scalable architectures._ ### What are the differences between D2 and Mermaid for diagramming? D2 supports features Mermaid currently lacks: marking components as multiple instances, SQL table definitions, markdown descriptions inside diagrams, and variable substitution. Mermaid is more widely pre-integrated into tools like Azure DevOps wikis and GitHub, and supports more diagram types such as state diagrams, Gantt charts, and mindmaps, while D2 requires installing Go and D2 separately. _Comparing diagram-as-code tools like D2 and Mermaid gets easier with daily.dev when picking the right one._ ### How do I install and run D2 locally on Windows? Install Go first, then install D2 via the .msi installer for Windows, through Homebrew on macOS, or with 'go install oss.terrastruct.com/d2@latest' on any platform. Create a file with a .d2 extension, then run 'd2.exe --watch .\my-diagram.d2' to preview changes live in a browser, or export the diagram as PNG or SVG. _daily.dev helps developers setting up new diagramming tools like D2 find setup guidance quickly._ ## Similar posts on daily.dev - [D2 Documentation](https://daily.dev/posts/d2-documentation-5kebtkv5e) · Hacker News · 21 upvotes · 0 comments - [This tool replaced every diagramming app I've ever used](https://daily.dev/posts/this-tool-replaced-every-diagramming-app-i-ve-ever-used-bp8r9djhw) · XDA Developers · 1 upvotes · 3 comments - [Azure DevOps Server –Mermaid support improvements](https://daily.dev/posts/azure-devops-server-mermaid-support-improvements-fvizqfi30) · The Art of Simplicity · 0 upvotes · 0 comments --- Tags: [#architecture](https://daily.dev/tags/architecture), [#vscode](https://daily.dev/tags/vscode) [View this post on daily.dev](https://daily.dev/posts/d2-like-mermaid-but-better-syntax-installation-and-practical-usage-tips-h63ymk1ba) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"D2: like Mermaid, but better. Syntax, installation, and practical usage tips","url":"https://daily.dev/posts/d2-like-mermaid-but-better-syntax-installation-and-practical-usage-tips-h63ymk1ba","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/d2-like-mermaid-but-better-syntax-installation-and-practical-usage-tips-h63ymk1ba"},"datePublished":"2026-10-04T13:05:41.389Z","dateModified":"2026-10-04T13:10:37.787Z","description":"D2 is an open-source, text-based diagramming tool positioned as an alternative to Mermaid for architectural diagrams. The guide covers D2's declarative syntax...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/9392ceea6fd905babf2d01ead8e178ce?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/9392ceea6fd905babf2d01ead8e178ce?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Code4IT","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Code4IT","logo":"https://media.daily.dev/image/upload/s--OaaG4G10--/f_auto,q_auto/v1791119049/logos/code4it?_a=BAMAMicg0","url":"https://daily.dev/sources/code4it"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/d2-like-mermaid-but-better-syntax-installation-and-practical-usage-tips-h63ymk1ba","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"architecture,vscode","timeRequired":"PT13M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Code4IT","item":"https://daily.dev/sources/code4it"},{"@type":"ListItem","position":3,"name":"D2: like Mermaid, but better. Syntax, installation, and practical usage tips"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/d2-like-mermaid-but-better-syntax-installation-and-practical-usage-tips-h63ymk1ba#faq","mainEntity":[{"@type":"Question","name":"How do I mark a component in a D2 diagram as having multiple instances?","acceptedAnswer":{"@type":"Answer","text":"Set the style.multiple property to true on the element definition, for example 'be: BackEnd { style.multiple: true }'. This renders the element as a stack to represent multiple instances of the same service without manually duplicating nodes, which is useful for showing replicated services like backend instances behind a gateway. daily.dev surfaces practical D2 syntax tips for developers documenting scalable architectures."}},{"@type":"Question","name":"What are the differences between D2 and Mermaid for diagramming?","acceptedAnswer":{"@type":"Answer","text":"D2 supports features Mermaid currently lacks: marking components as multiple instances, SQL table definitions, markdown descriptions inside diagrams, and variable substitution. Mermaid is more widely pre-integrated into tools like Azure DevOps wikis and GitHub, and supports more diagram types such as state diagrams, Gantt charts, and mindmaps, while D2 requires installing Go and D2 separately. Comparing diagram-as-code tools like D2 and Mermaid gets easier with daily.dev when picking the right one."}},{"@type":"Question","name":"How do I install and run D2 locally on Windows?","acceptedAnswer":{"@type":"Answer","text":"Install Go first, then install D2 via the .msi installer for Windows, through Homebrew on macOS, or with 'go install oss.terrastruct.com/d2@latest' on any platform. Create a file with a .d2 extension, then run 'd2.exe --watch .\\my-diagram.d2' to preview changes live in a browser, or export the diagram as PNG or SVG. daily.dev helps developers setting up new diagramming tools like D2 find setup guidance quickly."}}]} ```