<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Diagrams on Rachid Youven Zeghlache</title><link>https://youvenz.github.io/tags/diagrams/</link><description>Recent content in Diagrams on Rachid Youven Zeghlache</description><generator>Hugo</generator><language>en-us</language><lastBuildDate>Thu, 01 Jan 2026 00:00:00 +0000</lastBuildDate><atom:link href="https://youvenz.github.io/tags/diagrams/index.xml" rel="self" type="application/rss+xml"/><item><title>D2 Ink — D2 Architecture Diagrams for Inkscape</title><link>https://youvenz.github.io/projects/inkscape-d2/</link><pubDate>Thu, 01 Jan 2026 00:00:00 +0000</pubDate><guid>https://youvenz.github.io/projects/inkscape-d2/</guid><description>&lt;h2 id="overview"&gt;Overview&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;D2 Ink&lt;/strong&gt; integrates the &lt;a href="https://d2lang.com"&gt;D2 diagram language&lt;/a&gt; into Inkscape. D2 produces beautiful, automatically-laid-out architecture diagrams, entity-relationship diagrams, and software design maps from a declarative text syntax.&lt;/p&gt;
&lt;h2 id="why-d2"&gt;Why D2?&lt;/h2&gt;
&lt;p&gt;D2&amp;rsquo;s automatic layout engine (powered by ELK, Dagre, or TALA) produces publication-quality diagrams without manual positioning. Combined with Inkscape&amp;rsquo;s SVG editing capabilities, D2 Ink is perfect for creating and then polishing technical architecture figures for papers and presentations.&lt;/p&gt;
&lt;h2 id="example"&gt;Example&lt;/h2&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-fallback" data-lang="fallback"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;User -&amp;gt; API Gateway -&amp;gt; Auth Service
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;API Gateway -&amp;gt; Business Logic
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;Business Logic -&amp;gt; Database
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="installation"&gt;Installation&lt;/h2&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-bash" data-lang="bash"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;git clone https://github.com/YouvenZ/D2_ink
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Requires &lt;a href="https://d2lang.com/tour/install"&gt;D2 CLI&lt;/a&gt; to be on your &lt;code&gt;PATH&lt;/code&gt;.&lt;/p&gt;</description></item><item><title>Mermaid Ink — Mermaid Diagrams for Inkscape</title><link>https://youvenz.github.io/projects/inkscape-mermaid/</link><pubDate>Thu, 01 Jan 2026 00:00:00 +0000</pubDate><guid>https://youvenz.github.io/projects/inkscape-mermaid/</guid><description>&lt;h2 id="overview"&gt;Overview&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;Mermaid Ink&lt;/strong&gt; brings &lt;a href="https://mermaid.js.org"&gt;Mermaid.js&lt;/a&gt; diagram syntax directly into Inkscape. Write a flowchart, sequence diagram, Gantt chart, or entity-relationship diagram in Mermaid&amp;rsquo;s plain-text syntax and render it as fully editable SVG — no browser, no external service.&lt;/p&gt;
&lt;h2 id="supported-diagram-types"&gt;Supported diagram types&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Flowcharts (&lt;code&gt;graph TD&lt;/code&gt;, &lt;code&gt;graph LR&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;Sequence diagrams&lt;/li&gt;
&lt;li&gt;Gantt charts&lt;/li&gt;
&lt;li&gt;Entity-relationship diagrams&lt;/li&gt;
&lt;li&gt;Class diagrams&lt;/li&gt;
&lt;li&gt;State diagrams&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="installation"&gt;Installation&lt;/h2&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-bash" data-lang="bash"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;git clone https://github.com/YouvenZ/mermaid_ink
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Requires the &lt;a href="https://github.com/mermaid-js/mermaid-cli"&gt;Mermaid CLI&lt;/a&gt; (&lt;code&gt;npm install -g @mermaid-js/mermaid-cli&lt;/code&gt;).&lt;/p&gt;</description></item></channel></rss>