3D Network Diagram Editor

Showcase
1

Here is a project I’ve been working on for the last few months.
It’s a network diagram editor where you can create and share your diagrams with others (similar to google suite but for network diagrams in 3D :sweat_smile:).
https://app.networkmaps.org

The whole project is open source: GITHUB NetworkMaps

It would be great if you could have a look and give me your opinion :thinking:.

Facebook_DC_Fabric
Facebook_DC_Fabric1200×702 852 KB

Thanks,

3 Likes
2

Hello,
I took some time to try your app.
A couple of feedbacks:
1- overall concept is great!
2- html icons could be a bit bigger as it makes UI a bit tiny (i zoomed it to 150% to work comfortably)
3- I might increase size of assets on the grid a bit more (maybe the grid also) to make it more user friendly (try 150%)
4- Logic of menu interface is nice. functional. through it would have liked to have the erase feature more handy instead of always having to get away from “create menu” and go back to “edit menu” --> maybe once item is selected enable popup delete button>
5- icons are ok, functional.
6- Lines are ok, functional. But do not have any arrow a far as creating loop or showing direction of data flow -> relationships can get confusing without detailed text.
7- TEXT: that was my biggest frutstration. beyond the logic to delete ((4 above) slecting the TEXT was very tedious and frustrating. It always is the case if you try to select it as a 3D object. try maybe to select rather than exact pixel of text. by making bigger area clickable it makes it easier

I will stop here but nice start.
Oh, also: account creation process was a bit long I think (maybe) for now, you could do without and maybe just save in front end to reduce friction . Maybe export a file that user can save in their local without having to go through the whole registration only to try it.

KEEP IT UP !

test 1
test 11850×958 194 KB

3

Hey Jay.

Thanks for the feedback. Really appreciated. I’ll see what I can do about it.

  1. Thanks.
  2. Will check options here. I’ll see if I can have them a bit bigger while keeping usability on smaller screens (smartphones mainly).
  3. There is a zoom function you can use on the camera menu.
  4. There are quick access keys for activating the different tools (‘c’ is for erasing). But yes, I agree on this. I’ll try to add in some way direct access to the most common tools.
  5. I can add a few more options for lines. On the Add -> Symbol, there are arrows (although these can’t be bound to elements like links do).
  6. I totally agree with this one as I’ve had same frustration here. I like the idea of creating an area around the text that you can click.

Regarding the account creation, that’s something I thought in the past but due to the general architecture it was complicated to do. I’ll check it out as I think it would be great if people can try it without having to register.

Again, thank you,
Pablo.

1 Like