I want to build a visual canvas ("mindmap") where I can add text and boxes to a canvas while also connecting it nicely with arrows and lines. I'm looking for a super simple solution that is similar to Miro (just with far less complexity). Any ideas on how to implement such a thing?
Currently, I am looking at D3.js, Konva.js and gojs.net
Appreciate your help.
A nice example to look at would be excalidraw. It's fully open source, done in react using good practices etc. https://excalidraw.com/ - click the top right cat thing to go to the code.
Thanks, I like how it is really close to "drawing"
Some colleagues of mine are working on a similar open source project:
https://github.com/raimohanska/r-board
Perhaps you can check/fork/get inspired by their approach (it's MIT licensed).
Thanks for sharing, definitely interesting to look into!
r-board looks cool!
Ink and switches proof of concept pushpin is worth reviewing,
https://github.com/automerge/pushpin
it is a p2p corkboard, built using react
Very smart concept. Got inspired by it!
I've thought about building something like Miro too, and my initial thought was that I would build it as a react app and use a library like react-archer to connect absolutely positioned components and move them around using react-dnd. But Miro uses HTML canvas instead so I don't really know what the pro/cons of those two different approaches are.
This is an interesting read: https://medium.com/bluecore-engineering/svgs-bézier-curves-and-nodes-oh-my-540ea6cfeae5
Great guide. Also interesting to think about the HTML Canvas approach. Gotta dig deeper into benefits/downsides.
The screenshots looked really good, I wish they'd shared the code!
http://fabricjs.com seems to be the most universal solution so far
Fabric's support and development is a rocky ride :)
JointJs seems super powerful as well
I also stumbled across https://bpmn.io which seems quite cool.
This comment was deleted 2 years ago.