<?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: Diagram Now</title>
    <description>The latest articles on DEV Community by Diagram Now (@diagramnow).</description>
    <link>https://dev.to/diagramnow</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.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3991127%2F8484c916-cc83-4743-90f8-2363e194e511.png</url>
      <title>DEV Community: Diagram Now</title>
      <link>https://dev.to/diagramnow</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/diagramnow"/>
    <language>en</language>
    <item>
      <title>Building a browser diagram editor: which import/export formats actually matter?</title>
      <dc:creator>Diagram Now</dc:creator>
      <pubDate>Thu, 18 Jun 2026 15:15:19 +0000</pubDate>
      <link>https://dev.to/diagramnow/building-a-browser-diagram-editor-which-importexport-formats-actually-matter-18b5</link>
      <guid>https://dev.to/diagramnow/building-a-browser-diagram-editor-which-importexport-formats-actually-matter-18b5</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;Disclosure up front: I'm affiliated with &lt;strong&gt;diagram.now&lt;/strong&gt; — I'm connected to the product. I'm posting this to get developer feedback on diagram import/export interoperability, not to pitch an install.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Most teams I've worked with don't have one source of truth for their diagrams. They have:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;a few &lt;strong&gt;Mermaid&lt;/strong&gt; blocks living in READMEs and Markdown docs,&lt;/li&gt;
&lt;li&gt;an old &lt;strong&gt;Visio (&lt;code&gt;.vsdx&lt;/code&gt;)&lt;/strong&gt; or &lt;strong&gt;Lucidchart&lt;/strong&gt; file someone made two reorgs ago,&lt;/li&gt;
&lt;li&gt;a &lt;strong&gt;SQL&lt;/strong&gt; schema that is secretly the "real" ERD,&lt;/li&gt;
&lt;li&gt;and a pile of screenshots pasted into docs and tickets.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The diagram is rarely the hard part. The hard part is that the same diagram lives in five formats and none of them stay in sync with the docs they're supposed to explain.&lt;/p&gt;

&lt;p&gt;I've been working on &lt;strong&gt;diagram.now&lt;/strong&gt;, a browser-based editor for technical diagrams — flowcharts, UML, ERD, BPMN, cloud/network architecture, mind maps, wireframes. It's a free browser editor with no signup to start. There's an optional Confluence app for teams that want diagrams editable inside Confluence pages, but that's intentionally &lt;strong&gt;not&lt;/strong&gt; what I want to talk about here. I want feedback on the editor itself, and specifically on the interoperability story.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it does today
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Import/insert from Mermaid and SQL&lt;/strong&gt; — paste a Mermaid graph or a &lt;code&gt;CREATE TABLE&lt;/code&gt; block to start an &lt;em&gt;editable&lt;/em&gt; diagram instead of a static render.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Import Lucidchart and Visio &lt;code&gt;.vsdx&lt;/code&gt;&lt;/strong&gt; files — this is migration-oriented, and honestly the part I most want real-world files to stress-test.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Export to PNG, SVG, PDF, or a URL.&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;Templates/shapes for the diagram categories above.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I'm deliberately keeping the Confluence side secondary. The thing I actually want to learn is whether the browser editor plus import/export is useful on its own.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where I'd love feedback
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Imports:&lt;/strong&gt; Which format matters most to &lt;em&gt;you&lt;/em&gt; — Mermaid, SQL→ERD, &lt;code&gt;.vsdx&lt;/code&gt;, Lucidchart, or something else (PlantUML, draw.io XML, Graphviz)? If you've ever tried to migrate diagrams between tools, where did it break?&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;URL export:&lt;/strong&gt; Is a shareable diagram URL genuinely useful in your workflow (issues, chat, runbooks), or do you basically always want a PNG/SVG/PDF you can drop into a doc? I want to get the privacy and editability semantics right before leaning on it, so I'm honestly unsure how much people actually want it.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Templates:&lt;/strong&gt; What starter templates would make this worth keeping a tab open for? I'm considering an incident-runbook decision tree, an ADR/architecture diagram, a SaaS ERD, an AWS three-tier diagram, and an API sequence diagram — but I'd rather build what people ask for.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  What I'm &lt;em&gt;not&lt;/em&gt; going to claim
&lt;/h2&gt;

&lt;p&gt;draw.io and Lucid are mature and excellent and I'm not pretending otherwise. I'm also not going to tell you it imports every &lt;code&gt;.vsdx&lt;/code&gt; or Lucid file perfectly — diagram files vary wildly and I'd rather collect real failures than overpromise. And I'm not making any privacy or security claims about your data in this post; if you do try it, please use non-sensitive diagrams until the data-handling story is properly documented.&lt;/p&gt;

&lt;p&gt;If you want to poke at it: &lt;a href="https://diagram.now/" rel="noopener noreferrer"&gt;https://diagram.now/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Blunt feedback very welcome — especially "this import choked on my file" or "URL export is pointless because X." That's exactly what I'm hoping to learn.&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>devtools</category>
      <category>webdev</category>
      <category>productivity</category>
    </item>
  </channel>
</rss>
