Using Atom as a Diagram Editor


#1

Hi,
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.


#2

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.


#3

Greetings DamnedScholar!

I saw some sources that show how to draw UML diagrams in mermaid (packages in Atom). image
(ref: http://ruleoftech.com/2018/generating-documentation-as-code-with-mermaid-and-plantuml)


(ref: https://stackedit.io/app#)
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?


#4

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


#5


Restarted Atom…worked.


#6

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.


#7

Why not explore Raphael.js

http://dmitrybaranovskiy.github.io/raphael/

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

There is also an svg viewer package in atom.


#8

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


#9

Re: svgedit I recently found this minimal example

https://neil.fraser.name/news/2018/SvgCanvas.html

svgedit can be installed in electron app using npm.

And the author of Raphael.js also created this …

http://snapsvg.io/

Here is a fuller list of options to explore

https://modeling-languages.com/javascript-drawing-libraries-diagrams/

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


#10

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