When I see words like nestable and infinite, I assumed this would be something where you can draw a diagram and then zoom in or out to see it at different detail levels. IE, draw a CPU diagram and zoom out and it becomes a simple box. Then you construct a motherboard around it. So I can see it as a simple block diagram at motherboard level, but as I zoom in the motherboard disappears and I am in the context of the CPU, seeing things like cache locations, cores, etc.
This is a product I REALLY want. Since I want to be able to diagram entire complex systems without always seeing 10,000 boxes on screen. You could start a presentation at 35,000 feet, showing the entire rough structure, then zoom into different regions where more detail will appear (infinitely)
Nestable feels more like excalidraw, with a folder/file structure?
I've been working on something that might be worth giving a try! [1]
It's built more for specifically for software architecture rather than general whiteboarding, but we just recently added custom icon uploads so you could add whatever icons you want if you're more interested in hardware. The 'logical component' operates in two modes, one which is just a group, and one where it acts like a sub-board that scales its contents to fit the box.
Super cool! I'm excited to explore it as an excalidraw alternative for a lot of the diagrams I make.
Some initial notes:
- On the very first initial load, ~~there's no default tool selected~~ it selects the 'hand' tool in the bottom left, which hides the cursor. It seems to select the pointer tool after a refresh. I'm able to replicate in an incognito browser or by clearing site data. After scanning your documents, it appears its touchscreen related. My guess is that it got confused because I'm using one of the ASUS Duo laptops.
- I personally think it makes more sense to start docs on "What is Context" (on the documentation drawer), but that's a matter of opinion. The sandwich icon isn't as obvious as I'd like though, and it'd be nice to have a link to the next page at the bottom of every article.
- my initial thought from the sequence diagrams panel was that I could type to generate an initial image, then drag that into my canvas for position changes.
- this actually makes me think about mermaid's rendering engine, and how hard it would be to support moving and "pinning" an element, such that further diagram changes need to work around the pinned elements.
I've had a similar desire for a code modelling system for decades, so I've given it A LOT of thought, and there has been a lot of older research into Zoomable UIs and Semantic Zoom. Code Bubbles (https://learn.microsoft.com/en-us/shows/alm-summit-2011/code...) is the closest I've seen to the idea, but doesn't cover the scope I want.
Biggest challenge to me is the UX and navigating the relationships between entities (systems, components/modules, classes, functions, read/write memory, etc) requires a lot of design effort around how they work together consistently at all levels. Conceptually, your view is a set of boxes that are a filter/group-by over a lot of entities at some level, and you want to explode only some of those entities. eg. say you want to zoom into a micro-service's component level, but still see external APIs, which could be a single box per API or boxes for each endpoint. So the control you need over the way zooming works and the 'lens' over relationships filter/group-bys can easily become very complex; probably a good research project itself though!
I do think it's possible to build a good interface that would allow viewing from global cloud scale systems and right into the code through multiple paths, like design patterns/components or git repos with files/folders, but I'm not sure how nice it's going to be to use. There's a reason UML modelling didn't stick around.
And I'm not sure there's enough of a business case to fund it, but I'll definitely keep hoping to see it some day.
This is something I've always thought would be useful as well, but after seeing some demos of it in action [1], I'm now not so sure. One of the issues I see is that because of the infinite zooming/scaling, there's no sense of place or spatial awareness that you get with a 2D map, or even a traditional outline. I think it would be easy to get lost if you had too much nesting and a lot of content.
Maybe on a smaller scale, it would be manageable though. I remember seeing some presentations that use Prezi and that has the ability to nest text at different zoom levels, and the transitions between slides worked pretty well and you did still have a sense of place, but the presenters didn't have tons of content all over like in the youtube link. I wish I had a link handy for the Prezi presentation I saw online because some of them were structured like your description about different zoom levels, like a fractal.
I just had to go digging for this because your comment reminded me of something very similar; it's called Endless paper [1]. There may also be other similar ones on Infinite Canvas [2].
Prezi used to work this way. (It still may, but I haven't used Prezi in almost 10 years, and it looks like they've gone head first into the AI generated Slide Business)
https://prezi.com/
I used to make entire presentations, systems diagrams, story boards, etc all using scale as a meaningful piece of information. You could go way overboard with it but it was really great. (We used to have a saying "Your Prezi is making me dizzy" for folks that overdid the flying nature)
Zooming in to reveal things will only make it more ambiguous since the right depth at which we hide away content will vary based on the content.
We can more intuitively build this with nestable using deep links. Each layer/level can be shown in one canvas and a deeplink to another canvas that captures a more granular level of any of the components would be a much scalable and generic approach.
I don't understand how a diagram tool like this doesn't exist yet. I've also had this on my Christmas list for so long, where it would apply for any kind of diagrams or mindmaps
Nestable approach with canvas management is more similar to notion than muse.
Nestable also has deep linking across the app so that you can leave hyperlinks to other pages or shapes from anywhere to enable better organisation and management.
Canvases aren't generally used as knowledge bases because more often than not, it gets really hard navigating them and nestable wishes to solve that.
In terms of making a business of out nestable, I have no plans for it. This is fully local and the only charge I incur would be for hosting which is very minimal.
I love this idea, but would want to self host it. There are many other canvas options out there I can use that offer it, and I can mimic the nesting via links in something like Obsidian.
My work is primarily market strategy and product ideation. I do this in obsidian. Generally have a top level canvas and linked documents.
All the usual obsidian goodies work as expected.
I do like this app though. Great tool for preparing presentations to explain things and probably also great whiteboarding tool (company uses figma for that and it is beyond annoying!).
Tldraw's default version of nesting is embedding another full canvas. The benefit would be that the embedded canvas is fully live.
Nestable enables nesting at page management level and encourages deep links to connect things between canvases. This approach has proven to be much more scalable in all of my workflows
i find a "import pages" but no "export ALL pages"?
(i did see the "one-by-one option", but how about two trees?)
"closing the sidebar" seems to grant access to another menu that is not accessible elsewhere?
(appears to be of the actual canvas? has "export as svg" options like the context-menu, but also has "redo & revert" for example)
also appears there is a bit of an a "dynamic pen" (similar to excalidraw´s thickness?) - this could be a bit more pronounced i think
or/and maybe needs some smoothing (see https://news.ycombinator.com/item?id=44915897 and some of the other demos linked in there)
a onbeforeunload (or whatever the current go to) to "warn before closing the tab" would be neat too
(possibly gated behind Incognito-Mode detection - or only triggerd if the user himself did a import at the beginning or such?...)
Looks nice. For a true whiteboard experience, I think the 'Draw' tool should probably be the default rather than 'Select'. I was clicking around at first and couldn’t figure out why nothing was showing up.
1. Tldraw support of embedded canvases it not great when you are power using
2. You can open the sidebar from clicking the page name in the center top of the canvas
3. Initially I had the sidebar be a side component that pushes the canvas to the right but the change in aspect ratio was jarring because I was constantly opening and closing the sidebar
4. Made with tldraw is mentioned on the right bottom of the canvas. I am not trying to hide it in any way.
When I see words like nestable and infinite, I assumed this would be something where you can draw a diagram and then zoom in or out to see it at different detail levels. IE, draw a CPU diagram and zoom out and it becomes a simple box. Then you construct a motherboard around it. So I can see it as a simple block diagram at motherboard level, but as I zoom in the motherboard disappears and I am in the context of the CPU, seeing things like cache locations, cores, etc.
This is a product I REALLY want. Since I want to be able to diagram entire complex systems without always seeing 10,000 boxes on screen. You could start a presentation at 35,000 feet, showing the entire rough structure, then zoom into different regions where more detail will appear (infinitely)
Nestable feels more like excalidraw, with a folder/file structure?
I've been working on something that might be worth giving a try! [1] It's built more for specifically for software architecture rather than general whiteboarding, but we just recently added custom icon uploads so you could add whatever icons you want if you're more interested in hardware. The 'logical component' operates in two modes, one which is just a group, and one where it acts like a sub-board that scales its contents to fit the box.
[1] https://contexts.online
Super cool! I'm excited to explore it as an excalidraw alternative for a lot of the diagrams I make.
Some initial notes:
This is very cool! Thanks for sharing
I've had a similar desire for a code modelling system for decades, so I've given it A LOT of thought, and there has been a lot of older research into Zoomable UIs and Semantic Zoom. Code Bubbles (https://learn.microsoft.com/en-us/shows/alm-summit-2011/code...) is the closest I've seen to the idea, but doesn't cover the scope I want.
Biggest challenge to me is the UX and navigating the relationships between entities (systems, components/modules, classes, functions, read/write memory, etc) requires a lot of design effort around how they work together consistently at all levels. Conceptually, your view is a set of boxes that are a filter/group-by over a lot of entities at some level, and you want to explode only some of those entities. eg. say you want to zoom into a micro-service's component level, but still see external APIs, which could be a single box per API or boxes for each endpoint. So the control you need over the way zooming works and the 'lens' over relationships filter/group-bys can easily become very complex; probably a good research project itself though!
I do think it's possible to build a good interface that would allow viewing from global cloud scale systems and right into the code through multiple paths, like design patterns/components or git repos with files/folders, but I'm not sure how nice it's going to be to use. There's a reason UML modelling didn't stick around. And I'm not sure there's enough of a business case to fund it, but I'll definitely keep hoping to see it some day.
This is something I've always thought would be useful as well, but after seeing some demos of it in action [1], I'm now not so sure. One of the issues I see is that because of the infinite zooming/scaling, there's no sense of place or spatial awareness that you get with a 2D map, or even a traditional outline. I think it would be easy to get lost if you had too much nesting and a lot of content.
Maybe on a smaller scale, it would be manageable though. I remember seeing some presentations that use Prezi and that has the ability to nest text at different zoom levels, and the transitions between slides worked pretty well and you did still have a sense of place, but the presenters didn't have tons of content all over like in the youtube link. I wish I had a link handy for the Prezi presentation I saw online because some of them were structured like your description about different zoom levels, like a fractal.
[1] https://www.youtube.com/watch?v=GblI7GI0jQ4&t=85s
I think a minimap and/or zoom level indicator would help address those issues. Like what kinopio.club has: https://help.kinopio.club/posts/minimap/
I just had to go digging for this because your comment reminded me of something very similar; it's called Endless paper [1]. There may also be other similar ones on Infinite Canvas [2].
[1] https://www.endlesspaper.app/
[2] https://infinitecanvas.tools/
Prezi used to work this way. (It still may, but I haven't used Prezi in almost 10 years, and it looks like they've gone head first into the AI generated Slide Business) https://prezi.com/
I used to make entire presentations, systems diagrams, story boards, etc all using scale as a meaningful piece of information. You could go way overboard with it but it was really great. (We used to have a saying "Your Prezi is making me dizzy" for folks that overdid the flying nature)
Thanks for trying it out!
Zooming in to reveal things will only make it more ambiguous since the right depth at which we hide away content will vary based on the content.
We can more intuitively build this with nestable using deep links. Each layer/level can be shown in one canvas and a deeplink to another canvas that captures a more granular level of any of the components would be a much scalable and generic approach.
An ability to add a custom thumbnail image to a deep link might be a good compromise.
I don't understand how a diagram tool like this doesn't exist yet. I've also had this on my Christmas list for so long, where it would apply for any kind of diagrams or mindmaps
I think the best way to achieve that would be grouping plus ability to expand/collapse groups.
That is also something that I have always wanted... and it seems like we are in good company.
Ink & Switch did similar with Muse app [^1], but spun it off when they realized it wasn’t a sustainable business for them [^2].
[^1]: https://www.inkandswitch.com/muse/
[^2]: https://museapp.com/end-and-beginning/
Haven't heard of muse before but it looks great!
Nestable approach with canvas management is more similar to notion than muse.
Nestable also has deep linking across the app so that you can leave hyperlinks to other pages or shapes from anywhere to enable better organisation and management.
Canvases aren't generally used as knowledge bases because more often than not, it gets really hard navigating them and nestable wishes to solve that.
In terms of making a business of out nestable, I have no plans for it. This is fully local and the only charge I incur would be for hosting which is very minimal.
What you've got is pretty slick, IMO.
Since you're using tldraw, are you considering using Perfect Freehand?
https://news.ycombinator.com/item?id=44955624
I love this idea, but would want to self host it. There are many other canvas options out there I can use that offer it, and I can mimic the nesting via links in something like Obsidian.
My work is primarily market strategy and product ideation. I do this in obsidian. Generally have a top level canvas and linked documents.
All the usual obsidian goodies work as expected.
I do like this app though. Great tool for preparing presentations to explain things and probably also great whiteboarding tool (company uses figma for that and it is beyond annoying!).
Was this built with TLDraw SDK?
Maybe I'm missing implementation details, but TLDraw supports nested canvas too.
You can even nest and interact with the current canvas.
Here's the creator demonstrating this.
https://m.youtube.com/watch?v=1C2TdPkj6aQ&t=150
Tldraw's default version of nesting is embedding another full canvas. The benefit would be that the embedded canvas is fully live.
Nestable enables nesting at page management level and encourages deep links to connect things between canvases. This approach has proven to be much more scalable in all of my workflows
Its really responsive and I like how its easy to get to the whiteboard, no signup or popups, well done
i find a "import pages" but no "export ALL pages"? (i did see the "one-by-one option", but how about two trees?)
"closing the sidebar" seems to grant access to another menu that is not accessible elsewhere? (appears to be of the actual canvas? has "export as svg" options like the context-menu, but also has "redo & revert" for example)
also appears there is a bit of an a "dynamic pen" (similar to excalidraw´s thickness?) - this could be a bit more pronounced i think or/and maybe needs some smoothing (see https://news.ycombinator.com/item?id=44915897 and some of the other demos linked in there)
a onbeforeunload (or whatever the current go to) to "warn before closing the tab" would be neat too (possibly gated behind Incognito-Mode detection - or only triggerd if the user himself did a import at the beginning or such?...)
very neat tho
Looks nice. For a true whiteboard experience, I think the 'Draw' tool should probably be the default rather than 'Select'. I was clicking around at first and couldn’t figure out why nothing was showing up.
Not to be too critical but:
- What does this add to the TLDraw SDK it's clearly built on that, and TLDraw already supports rested canvases
- the sidebar seems a bit janky, given there is no intuitive way to pop it back out once closed, and it covers the TLDraw ui components.
- Feels a bit disingenuous not mentioning TLDraw anywhere
Thanks for trying it out!
1. Tldraw support of embedded canvases it not great when you are power using 2. You can open the sidebar from clicking the page name in the center top of the canvas 3. Initially I had the sidebar be a side component that pushes the canvas to the right but the change in aspect ratio was jarring because I was constantly opening and closing the sidebar 4. Made with tldraw is mentioned on the right bottom of the canvas. I am not trying to hide it in any way.