UI

[leandrodamascena]

We need to think of a friendly interface for using diagrams on the web. I believe that we should be concerned with the following items:

• Clean and useful interface. I like cloudskrew project (https://www.cloudskew.com/)
• Options to download and export diagram
• Drag and drop interface

I'm not expert in HTML/CSS, do you guys are expert in these technologies? I can help with ideas and backend implementation.

[gabriel-tessier]

I think in first version we can go with editor and typing python code, then in a version 2 we can use drag and drop to build the diagrams, if the drag and drop is aimed to draw the diagrams.

[leandrodamascena]

Agree @gabriel-tessier. Just ideas to keep in mind. :)

[mingrammer]

Agree with @gabriel-tessier too. The Diagrams is for Diagram as Code, so we should focus the conveniences for writing code on the web in my thought.

And we may have to research some edit and render interface like codepen, graphviz online editor (but it has a too old look and feel interface), and so on. Or we can benchmark the online judge websites.

I'll do research for it in this week, and want to propose some interfaces and discuss it with you. Any ideas are welcome.

[leandrodamascena]

Yes yes @mingrammer. I agree with you two and we must start as simple as possible :).

We might use https://ace.c9.io/

[mingrammer]

Looks good. We can use that as our editor with some customization if needed. Do you have experiences with this? :)

[leandrodamascena]

If needs small customization, yes, I can! :)

[gabriel-tessier]

Here an overview with the textarea (previous version) and the ace editor... I need to clean the js to remove the textarea.

I will continue to push and comment on this issue #1 about editor.

[mingrammer]

What do you think about this left and right panels interface rather than top and bottom? (but we should put the editor on the left, and render page should be on the right)

This is LeetCode interface example.

[gabriel-tessier]

Looks good!!
On top bar we can add tools like history and links to example, documentation etc....
I will try this one and post a screenshot.

[mingrammer]

Good ideas :) Thank you for work on it!!

[leandrodamascena]

@gabriel-tessier do you need some help now?! I'm waiting your initial PR to contribute with new code and features.