<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Justin Greywolf</title>
    <description>The latest articles on DEV Community by Justin Greywolf (@jgreywolf).</description>
    <link>https://dev.to/jgreywolf</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3868462%2Fbef6845f-edb7-4733-a0aa-8a7e5259efaf.jpg</url>
      <title>DEV Community: Justin Greywolf</title>
      <link>https://dev.to/jgreywolf</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/jgreywolf"/>
    <language>en</language>
    <item>
      <title>Rethinking diagrams: from fixed types to composition (Runiq DSL)</title>
      <dc:creator>Justin Greywolf</dc:creator>
      <pubDate>Sun, 12 Apr 2026 18:49:00 +0000</pubDate>
      <link>https://dev.to/jgreywolf/rethinking-diagrams-from-fixed-types-to-composition-runiq-dsl-1ll</link>
      <guid>https://dev.to/jgreywolf/rethinking-diagrams-from-fixed-types-to-composition-runiq-dsl-1ll</guid>
      <description>&lt;p&gt;Most diagram tools ask you to make a decision before you even start:&lt;/p&gt;

&lt;p&gt;Do you want a flowchart? Sequence diagram, Architecture diagram, UML diagram, etc.&lt;/p&gt;

&lt;p&gt;Each comes with its own syntax, rules, and constraints. And that works well - until it doesn’t.&lt;/p&gt;

&lt;p&gt;Real systems don’t fit neatly into a single diagram type. They blend structure, flow, relationships, and context. But most tools force you to pick one model and stay within it.&lt;/p&gt;

&lt;p&gt;Switching between diagram types often means switching syntax, mental models, and sometimes even tools.&lt;/p&gt;

&lt;p&gt;Over time, that friction adds up.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Background:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I’ve spent a lot of time working with diagramming software and tooling in general, and was even a member of the MermaidJS team, so I’ve seen firsthand where these tools shine, and where they start to feel a little rigid.&lt;/p&gt;

&lt;p&gt;Runiq grew out of that experience.&lt;/p&gt;

&lt;p&gt;I kept running into the same problem. Switching diagram types meant switching syntax, tools, and mental models. As systems grew, adding new features became harder, and supporting new diagram types often meant building entirely new structures from scratch.&lt;/p&gt;

&lt;p&gt;Runiq is an attempt to unify that into a single system. Without forcing everything into one box.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The idea&lt;/strong&gt;: "composable diagrams"&lt;/p&gt;

&lt;p&gt;Instead of defining diagrams strictly by type, Runiq is built around a shared system.&lt;/p&gt;

&lt;p&gt;In the main diagram profile, you can:&lt;/p&gt;

&lt;p&gt;mix shapes from different diagram styles&lt;br&gt;
combine flow, structure, and relationships&lt;br&gt;
reuse styling and layout concepts consistently&lt;/p&gt;

&lt;p&gt;For example, a single diagram might include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;flowchart-style decisions&lt;/li&gt;
&lt;li&gt;architecture-style containers&lt;/li&gt;
&lt;li&gt;labeled relationships between components&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This allows diagrams to reflect how systems actually work, rather than forcing them into predefined categories. Or even being able to display a flowchart and pie charts in the same diagram.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Domain boundaries (important)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Granted, not everything can be mixed together.&lt;/p&gt;

&lt;p&gt;Some diagram types live in their own profiles because they follow different rules or require specialized layouts:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;sequence diagrams&lt;/li&gt;
&lt;li&gt;timelines&lt;/li&gt;
&lt;li&gt;family trees (pedigree diagrams)&lt;/li&gt;
&lt;li&gt;technical schematics (electrical, digital, etc.)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These are intentionally separate.&lt;/p&gt;

&lt;p&gt;So the model is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;composable where it makes sense&lt;/li&gt;
&lt;li&gt;separate where the domain requires it&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Runiq also includes glyphsets, which are essentially predefined layout patterns—similar to SmartArt.&lt;/p&gt;

&lt;p&gt;These let you quickly generate common diagram structures like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;cycles&lt;/li&gt;
&lt;li&gt;hierarchies&lt;/li&gt;
&lt;li&gt;matrices&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;They’re useful when you want to move fast without manually defining every node and connection. You can also "convert" most glyphsets to a different style, without having to change your syntax or adjust your existing items&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;br&gt;
Here is an example that combines flowchart + typed containers + C4/cloud + UML state + chart/requirement/threat shapes in a single diagram.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;diagram "Composable Checkout" {
  direction LR

  container insight "Signals" as @requirementPackage {
    shape funnel as @pyramid label:"Checkout Funnel" data:[100,72,48,41]
    shape audit as @requirement label:"REQ-12\nAudit every order"
  }
  container journey "Checkout Flow" as @systemBoundary  {
    shape user as @actor label:"Customer"
    shape cart as @document label:"Cart"
    shape valid as @rhombus label:"Payment valid?"
    shape receipt as @document label:"Receipt"
    shape retry as @rounded label:"Retry"
  }

  container platform "Platform" as @awsVpc {
    shape api as @c4Container label:"Checkout API"
    shape worker as @awsLambda label:"Worker"
    shape db as @awsRds label:"Orders DB"
  }

  container lifecycle "Order State" as @umlPackage {
    shape received as @state label:"Received"
    shape paid as @state label:"Paid"
    shape fulfilled as @state label:"Fulfilled"
  }

  shape fraud as @threat label:"Fraud attempt"
  shape mfa as @mitigation label:"Risk scoring"

  user -&amp;gt; cart
  cart -&amp;gt; valid
  valid -yes-&amp;gt; receipt
  valid -no-&amp;gt; retry
  retry -&amp;gt; valid

  receipt -&amp;gt; api
  api -&amp;gt; worker
  worker -&amp;gt; db

  db -&amp;gt; received
  received -&amp;gt; paid
  paid -&amp;gt; fulfilled

  fulfilled -&amp;gt; funnel
  db -&amp;gt; audit

  fraud -&amp;gt; valid
  mfa -&amp;gt; fraud
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc7u83w75nqtcch1jvzxe.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc7u83w75nqtcch1jvzxe.png" alt="Example of composable diagram"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Output&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Runiq generates clean, standards-compliant SVG.&lt;/p&gt;

&lt;p&gt;There are no HTML-based rendering tricks, which makes the output more reliable in environments like PowerPoint, PDFs, and other strict SVG consumers.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tradeoffs&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Runiq isn’t strictly better than existing tools in every case.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Mermaid’s markdown-style syntax is lighter and faster for simple diagrams&lt;/li&gt;
&lt;li&gt;PlantUML has a mature ecosystem and broad support&lt;/li&gt;
&lt;li&gt;Runiq is newer, with a smaller ecosystem&lt;/li&gt;
&lt;li&gt;Not all diagram types are composable (some are intentionally separate)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Runiq leans toward:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;more structure (DSL instead of markdown-like syntax)&lt;/li&gt;
&lt;li&gt;more flexibility (composition where appropriate)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Why this approach&lt;/p&gt;

&lt;p&gt;The goal isn’t to replace every diagram tool.&lt;/p&gt;

&lt;p&gt;It’s to explore a different model:&lt;/p&gt;

&lt;p&gt;A system where diagrams share a common foundation, instead of being isolated by type.&lt;/p&gt;

&lt;p&gt;Try it out&lt;/p&gt;

&lt;p&gt;Docs: &lt;a href="https://runiq.org/" rel="noopener noreferrer"&gt;https://runiq.org/&lt;/a&gt;&lt;br&gt;
Editor: &lt;a href="https://editor.runiq.org/" rel="noopener noreferrer"&gt;https://editor.runiq.org/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Feedback&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If you’re coming from Mermaid or PlantUML, I’d especially be interested in:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;where this feels better&lt;/li&gt;
&lt;li&gt;where it feels worse
-anything that feels confusing or missing&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>architecture</category>
      <category>showdev</category>
      <category>systemdesign</category>
      <category>tooling</category>
    </item>
  </channel>
</rss>
