Graphisual: Interactive Graph Visualizer with a 3D Mode

Showcase
, , ,
1

Hey everyone, I’ve been working on Graphisual, an interactive graph visualizer that lets you draw graphs and watch algorithms run visually, with an optional 3D mode to explore graphs spatially.

Most graph visualizers I tried felt unintuitive to use, so I wanted to build something closer to the experience of white boarding tools like Excalidraw, but with the added ability to switch into 3D for a more immersive view.

A personal note: I don’t have formal Three.js expertise, and I really respect the depth of effort people put into learning graphics programming properly. For my own projects, tools like LLMs have helped me iterate faster and get closer to the ideas I want to build, especially around 3D interactions and rendering. I also leveraged an agent skill aimed at Three.js optimization while working on this.

Features:

  • Create and edit graphs interactively (nodes + edges)

  • Toggle between 2D and 3D visualization

  • Pan/zoom and freely explore the graph in 3D space

  • Undo/redo while experimenting

  • Export graphs as SVG/PNG

Try it here: https://graphisual.app
Code: https://github.com/lakbychance/graphisual

Would love any feedback.

4 Likes
2

Beautiful minimalistic design. The 2D view is nice, it has some retro style. The 3D view is cute, but it looks like only the visuals are 3D, not the topology. I would imagine that the 3D view could show how any graph (even non-planar) could be arranged in 3D without crossings.

Here are some findings:

  • the rotation in 3D is somewhat strange, as if sometimes it snaps from one orientation to another
  • I was unable to make two links from one node to another node
  • I was unable to show weight 0 of a link
  • would it be nice if the labels always face the user in 3D mode
  • there is no undo after reset
  • the 2D and 3D links do not match (see the link from 4 to 2)

image
image2019×763 167 KB

3

Thanks a lot for the detailed feedback here !! I have got back to your points below :-

I would imagine that the 3D view could show how any graph (even non-planar) could be arranged in 3D without crossings.

I agree that the view is somewhat 2.5D and not completely 3D. I wanted to make it feel cool as you said but it’s not fully functional in this view agreed. Would see if I find a nice way to do that.

the rotation in 3D is somewhat strange, as if sometimes it snaps from one orientation to another

I have not encountered that snap as you suggested but yes it’s limited again due to 2.5D view.

I was unable to make two links from one node to another node

That’s a logical limitation of simple graphs. Intentional guard against that.

I was unable to show weight 0 of a link

That’s a design choice by me. But interesting to know it felt unnatural.

would it be nice if the labels always face the user in 3D mode

Do you mean node labels or edge labels or both ?

there is no undo after reset

Yes intentional but I get that this should be also undoable.

the 2D and 3D links do not match (see the link from 4 to 2)

It is a visual inconsistency that happens sometimes between 2d and 2d possibly due to curve calculation mismatch for longer ones. Can be fixed.

Really appreciate you taking the time to look through it so carefully and share such detailed thoughts.

1 Like