Using Atom as a Diagram Editor


I was wondering if it was possible to make a visual diagram editor in Atom. a bare bones Visio for e.g. I just want to be able draw lines to make up a square and connect squares together with arrows and then be able to compile it to a textual format.

I see packages like Atom Mermaid. But this is the opposite of what I want. I don’t want to write it in text. Also, it’s not necessary that I see my compiled text. The same way TypeScript is compiled to JavaScript, I would like my visual file to be compiled to Javascript.

If you know of any such packages or other docs/blogs which I could look for inspiration, please do let me know.


If you can make a diagram editor in Chrome using Node.js functions, you can do it in Atom. In fact, I would recommend that you start by figuring out how to write the code to make a web-app diagram editor (or finding an open-source one and learning its code) and then connecting it into Atom by surrounding it in a package.


Greetings DamnedScholar!

I saw some sources that show how to draw UML diagrams in mermaid (packages in Atom). image

So I downloaded atom-mermaid, language-mermaid, language-plantuml, plantuml-preview.
But I see only a white space even after toggle preview for all 3: Mermaid, plantuml viewer, plantuml.
Mermaid is being used to draw these diagrams in other editors. Atom has mermaid too.
How do I draw and see UML diagrams in Atom?


Oh yes, here’s the screenshot of my Atom file:


Restarted Atom…worked.


Thanks for your input. My intention is the opposite of mermaid. In mermaid, one writes text and it compiles diagrams. I want to draw diagrams and compile it into text. I’m looking at SVG and other related ideas.


Why not explore Raphael.js

and/or go for an SVG editor … in your browser

There is also an svg viewer package in atom.


Thanks for Raphael.js. I have been checking out svgedit since a few weeks ago.


Re: svgedit I recently found this minimal example

svgedit can be installed in electron app using npm.

And the author of Raphael.js also created this …

Here is a fuller list of options to explore

and I would certainly consider d3js … probably at top of list.


Thank you very much @d_l. I have noted them down.