8 ms·
Show HN: Terrastruct – A Diagramming Tool for Systems
- alixanderwang 7y agoHi HN, I made a diagramming tool specifically for explaining systems. It's something that I felt like I could've needed at my previous engineering jobs when I was explaining some software architecture or concept that were complex and I had trouble expressing on a single image diagram. Would love to hear HN's thoughts and feedback!
- alixanderwang 7y agoThe UI iterations of this app over 2 years: https://twitter.com/alixanderwang/status/1212875949101875200 https://twitter.com/alixanderwang/status/1212875949101875200
- alixanderwang 7y agoSome educational content made with this tool: An overview of modern Javascript tools https://app.terrastruct.com/diagrams/788622353 https://app.terrastruct.com/diagrams/788622353
- wokwokwok 7y agoI've often needed something like this, but, sadly, once again, this isn't it. No discredit to you; this is great work, but for me, personally: The world does not need more diagram editors. Diagrams are fundamentally not the right tool for the problem I have. The problem I have is that I have a technical system, for example, a network diagram, or an architecture diagram of a system or set of systems; and I need the data that represents that system, to be visualised in multiple diagrams, in such a way that you can have multiple views of the same data. This means that when you make a change to the data, all of the diagrams are updated to reflect that change. As an analogy to explain what I mean, consider a 3D model: If you have a 3D model, you want to save it as a 3D model. What you don't want, is to manually draw the way that model looks from 5 different perspectives; because if you alter the model, to say, add a new cube, or change the color of a face; you have to redraw every single diagram. What would be actually novel, would be to allow you tag / label / whatever the components of your diagrams in some way, and they apply filters to the diagram to generate different views of the data, while maintaining one single master diagram. I know, this is a hard problem, because layouts are fundamentally hard (if you've ever worked on layout engines you'll know exactly what I mean), and you end up looking like graphviz as soon as you try to use constraint solving to layout the elements in a diagram... I guess. ...but, at least it would be genuinely novel to try. I don't really see much here that would, eg. get to use it over the many other indistinguishable diagram editors out there.
- artworx 7y agoI've used https://structurizr.com https://structurizr.com for that purpose before. It allows you to define the elements (containers, users, etc.) separately from the diagrams and then pull them into various views of the system. My workflow is something like this: - define the elements at various zoom levels https://structurizr.com/share/1/explore/tree https://structurizr.com/share/1/explore/tree - define the relations https://structurizr.com/share/1/explore/component-dependencies https://structurizr.com/share/1/explore/component-dependenci... - create diagrams by selecting subsets of what was defined in the first two steps https://structurizr.com/share/36141/diagrams#SystemLandscape https://structurizr.com/share/36141/diagrams#SystemLandscape
- vinodkd 7y agoDo you mean something like Netflix Vizceral[1]? The problem with using data is that there's usually too much of it, and at that point you do end up with a graph that only something like graphviz can layout. I know what you mean though; but it has to be IMO just enough data, that can then be tweaked by a human to help with the key purpose of such diagrams - human understanding. 1: https://github.com/Netflix/vizceral https://github.com/Netflix/vizceral
- wokwokwok 7y agoThat’s my point; it’s clearly not an easy problem to solve, but it has inherent value over other diagramming tools if you can solve it.
- gugagore 7y agoI don't have any personal experience from it aside from viewing an existing architecture once, but from what I could tell, the ArchiMate language supports this, possibly via a concept called "viewpoints" (https://en.wikipedia.org/wiki/ArchiMate#Viewpoints https://en.wikipedia.org/wiki/ArchiMate#Viewpoints). There is a free and open-source tool for it: https://www.archimatetool.com/ https://www.archimatetool.com/ .
- based2 7y ago
- shishy 7y agoI've been using draw.io for this in the past... will play with your tool, just made an account, but wondering if you could clarify what the differences are (the landing page didn't make it immediately obvious to me). EDIT: I like the concept of Scenarios a lot! Will be using this more regularly... if you can do a PDF export, would be killer for me :)
- alixanderwang 7y agoThat’s what I use as well! And it works perfectly when what I’m diagramming is pretty simple. It’s just that when I’m trying to diagram anything nontrivial, I can’t map it out on a one dimensional diagram without it turning into a mess. That’s why I created this!
- tpfour 7y agoHmm. Can you expand further? I also use draw.io and a quick look at your landing page did not enlighten me.
- alixanderwang 7y agoSo for example, I’d often want to add some sequences to diagrams, and the only way to do so is by numbering the connections, which in my experience becomes too messy/confusing after the single digits. Another example is if I’m diagramming an API, the paths that a request takes differs under different conditions/scenarios. So a canonical diagram for a system in a company design doc ends up only illuminating the happy path of a successful request, missing so many detail because it couldn’t fit nicely into one diagram. Another is my issue with scattered diagrams detailing different subsystems. Eg a high level overview contains many microservices each diagrammed by their own teams. I wanted to be able to hop layers, easily going up and down a subsystem to see how they behave when handling something. And in my experience, decentralized diagrams within an org ends up becoming a guessing game of which one is most up to date and which ones haven’t been deprecated.
- mahesh_rm 7y ago
- proee 7y agoYou should consider adding a premium paid version, in addition to your enterprise version. This could add a lot of revenue to your bottom line.
- SlowRobotAhead 7y agoI like it, but just browsing the site quickly I’m not seeing something I’ve grown accustom to: sequence diagrams. My auth system for an embedded product to hit AWS is three players and fairly complex to explain. Makes sense to me as a sequence diagram, does anyone know if this option exists?
- alixanderwang 7y agoThis is designed for sequences! You have to create a scenario (name of your sequence, eg “auth request”), and then you create frames for it. Frames are steps of a sequence. I used to use websequencediagrams.com for this btw, in case that fits your needs too!
- SlowRobotAhead 7y agoWell then I really need to download this. Yes, WSD is awesome.
- joaomacp 7y agoI use a similar tool: sequencediagram.org Seems to have very similar features, and can export to svg for free (in websequencediagrams.com it's a premium feature)
- infamia 7y agoAfter playing with it for a few minutes, this looks like it could be a really handy tool. Often times I'd find myself creating enormous diagrams trying to capture everything your tool handles more gracefully. Is there some way to export data (SVG ideally) so I can use the diagrams in other apps? Also, I noticed that saving a diagram doesn't retain labels I give a block.
- blatherard 7y agoI had the same label-saving problem in Firefox. Chrome seemed fine. It would be nice if there was an obvious way to report issues through the interface.
- alixanderwang 7y agoThere is a send feedback feature, it’s in the drop down under your username top left. Thanks so much for reporting that, because I had only tested it extensively in Chrome and hadn’t seen that. Edit: I've fixed it. (apparently you can't use innerText in Firefox, has to be textContent)
- bbmario 7y agoHow is this different from draw.io?
- alixanderwang 7y agoSee the thread above (currently), I responded there on this question.
- bamazizi 7y agoNice tool, I can see myself using it. I was intuitively clicking on the boxes expecting to go to the details of that component. It would be nice to move deeper into sub-layers dynamically, instead of relying on the side tree menu.
- alixanderwang 7y agoYeah I thought about this as well and is something I originally imagined as a cool feature. The problem, though, is that not everyone will create a sub-layer for every component. It'd be a bad user experience for the viewer to have to just try clicking components to see which ones work, and I don't want to modify the look of the diagram, from what the author intended, to add some visual indicator that it's clickable.
- vinodkd 7y agoPlease do reconsider adding a visual indicator. Direct manipulation is a powerful UI technique and helps retain user focus. It could be something as simple as the mouse pointer changing when hovering over a component that can be drilled down into.
- gregmac 7y agoHovering the navigation on the left could also highlight all linked components as well, giving a better sense of what you can drill into (without having to discover for yourself by moving your mouse all over the diagram).
- alixanderwang 7y agoThis is an excellent suggestion, I might just do that. Thanks!
- topspin 7y agoAny relationship to terraform?
- alixanderwang 7y agoNope
- zzo38computer 7y agoI would prefer to use local programs to make such things. Is there such a open source software that uses Xaw or just plain X window, preferably where the file format is a sequence of PostScript tokens (to make it easy to write a parser for the file format in PostScript (I also wrote a JSON parser in PostScript, so JSON would also work))?
- simplyinfinity 7y agoMermaid.js may be what you are looking for. Draw. Io is also open source and has desktop client
- deleted 7y ago[deleted]
- scottmotte 7y agoI've been using MindNode for this. I've found it very good at letting me quickly transfer my system ideas to paper. It gets out of the way and works with quick keystrokes. But it breaks down when trying to use it for presentation. It is too difficult to show and hide different states of the system when presenting to others. It's slow changing between each state by showing and hiding different nodes. I'm looking forward to trying your tool for this reason. I just wish it was a local program.
- vinodkd 7y agoKudos on the elegant execution of an interface to explain architecture and system behavior with layers and sequences! Suggestions for v2: How to show v2 of system has changed since v1, and handling requests from your users to version control their diagrams. Nice problems to have!
- starefossen 7y agoAny thoughts on support for textual representation of the diagrams?
- alixanderwang 7y agoWhat do you mean by textual? Like ascii art? In general I’d love to be able to export this to some non-web format, but I just don’t know any that fit given that there’s 3 dimensions (layers of the diagram, scenarios for each layer, and frames for each scenario). All the formats only support linear traversal (eg pdf pages, gif frames). Exporting as a directory of files viewed as a tree hierarchy is the closest I can think of.
- lenkite 7y agoHe means using a language to generate diagrams. (I use a personal tool that has a LISP-like language to generate simple block diagrams in JavaFX for myself).
- alixanderwang 7y agoAh. Yeah if this is something people use and I can support myself with it, I would love to work on adding that.
- freeballer 7y agoEvery couple years I go through the exercise of trying to find the right solution like d3.js, mermaid, or dot and graphviz to automatically generate diagrams like you're creating here. Every couple years I continue to be disappointed.
- mbar84 7y agoYou might be interested in Svgbob https://github.com/ivanceras/svgbob https://github.com/ivanceras/svgbob and AsciiGrid: https://mbarkhau.keybase.pub/asciigrid/ https://mbarkhau.keybase.pub/asciigrid/
- meddlepal 7y ago> This is an iFrame of a diagram [...] Why do I give a shit as a potential user that this is an iFrame?
- shapiro92 7y agobecause that indicates that this product has iFrame capabilities just for the graphs therefore you can easily add it to for example Confluence.. Just because you dont understand it doesnt mean you need to be rude.
- deleted 7y ago[deleted]
- alixanderwang 7y agoAs shapiro92 commented, it's for the purpose of conveying that it can be embedded. You're right that I should make that more clear, I appreciate the feedback.
- shapiro92 7y agoDefinitely an advancement over draw.io however isnt this just mermaid diagrams?
- alixanderwang 7y agoThanks! Are you referring to this? https://mermaid-js.github.io/mermaid/#/ https://mermaid-js.github.io/mermaid/#/ If so, that looks like the output is still single-image diagrams. The differentiation of Terrastruct is having an elegant way to aggregate what would've been many diagrams, to express something complex, into one.
- davalapar 7y agoThe sign-up requirement is a big onboarding hiccup. Like yo, I don't even know what it really does yet, why are you asking me to create an account? Do you really expect your users to capture your value prop based on just screenshots alone?
- alixanderwang 7y agoThanks for that feedback. I'm working on that, I'll let users be able to play around with editing the demo with no save functionality without creating an account.
- vasergen 7y agoWould be nice to have examples, so after login user can use them, to check how tool is working, what are layers and scenarios.
- alixanderwang 7y agoYeah you're right, I should allow users to load examples. Thanks!
- berkayozturk 7y agoI highly recommend https://draw.io https://draw.io
- alixanderwang 7y agoSame. It's for different purposes, but I 100% recommend using draw.io for simple one-image diagrams. This tool is specialized for complex systems that you can't fit in a single image.
- based2 7y agoalt: https://www.archimatetool.com/ https://www.archimatetool.com/ https://plantuml.com/archimate-diagram https://plantuml.com/archimate-diagram https://c4model.com/ https://c4model.com/ https://news.ycombinator.com/item?id=21032805 https://news.ycombinator.com/item?id=21032805
- isuckatcoding 7y agoCurious, what JS libs are you using for the drawing? Or is it a pure “from scratch” thing?
- alixanderwang 7y agoI'm using this low level SVG library: https://svgjs.com/docs/3.0/ https://svgjs.com/docs/3.0/
- isuckatcoding 7y agoAh that’s cool. Any reason you picked that over a canvas implementation?
- alixanderwang 7y agoTBH, I saw that's what another popular diagramming tool was using.
- d--b 7y agoThe thing I’ve been wanting is to have a diagramming tool that can serve as a live health dashboard with links to logs. Infrastructure diagrams always get out of date, unless they’re looked at frequently. By hooking the diagrams with live status and logs, it becomes a tool that’s used daily. It would make logs easier to navigate and diagrams kept up to date.
- YawningAngel 7y agoIf you use Kubernetes you might find ArgoCD and Weave Scope interesting, both _sort of_ do this
- ailideex 7y agoIf you just want links to logs then you can use draw.io and export an svg: https://svgshare.com/i/H7g.svg https://svgshare.com/i/H7g.svg If you want dynamically updating diagrams you can maybe consider some of the diagram creation generation tools listed here: https://asciidoctor.org/docs/asciidoctor-diagram/#creating-a-diagram https://asciidoctor.org/docs/asciidoctor-diagram/#creating-a...
- alixanderwang 7y agoThat’s an interesting feature to add as an enterprise feature. Something like a webhook with a programmable action (eg turn red when pinged health down).
- okpatil 7y agoWe have developed something on these lines. Please send me an email omkar@wynum.com for a demo.
- PunksATawnyFill 7y ago“ create Scenario's for your diagram. Each Scenario is meant to capture a different set of conditions, and is composed of multiple Frame's” Friendly suggestion: Fix these spelling errors.
- alxlaz 7y agoCan I nitpick two things about the website? I don't mean to be an asshole about it or anything, I just hope it can help in some way: - I think the mobile detection thing uses nothing but window size to determine if this is on a mobile browser or a desktop, so it mistakes my (definitely desktop) browser window for a mobile one. I know from my friends who do frontend stuff that reliably detecting a mobile browser isn't very straightforward (or even possible?) but perhaps a "my device was not correctly detected, request desktop site" button would help? Or at least a hint about resizing the browser window for technical users who are, nonetheless, not very web-inclined? - The plural of "scenario" is "scenarios", without an apostrophe. Also frames, not frame's. Sorry if it seems overly pedantic but I see a lot of people (including native speakers) do this and it's driving me nuts. Other than that I think like the idea! Me and web interfaces don't really get along so I can't say I've done too much test driving but I realize that's a personal preference of mine, and quite possibly something that puts me outside your target audience. I don't suppose there's yet a good web equivalent of Visio, and I'm fairly sure that the ones I've tried don't have the hierarchical/structured approach to diagramming that Terrastruct has. Best of luck with it -- I hope ten years from now I can tell my friends I went all grammar nazi on alixanderwang, world-renowned billionaire and the founder of Terrastruct!
- caro_douglos 7y agoAre you using a Linux desktop? Recently I ran into this more and more. Eventually it came down to Linux being in the user-agent causing a large chunk of sites to assume I was using android. This became apparent when gmail asked if I wanted to download the mail application when visiting their site with cookies cleared. Once the agent was changed I no longer get mobile type notifications (on my desktop).
- alxlaz 7y agoI don't know why you're being downvoted. This may be a very legitimate problem, especially considering that OP says they haven't seen this yet. And yes, I am using a Linux desktop!
- alixanderwang 7y ago
- joantune 7y agoNice! I was just looking to convey entity diagrams to a client - and thought of doing them through something like Omnigraffle - this looks like it could do the job. However - it doesn't seem to export itself well (the Print doesn't work - or something like a read only link would be enough)
- alixanderwang 7y agoThere is a read only link, that’s what the demo is. Under the drop down for the diagram (hovering the diagram name in the top center), you can find a Presentation Mode. Then just share that link. Thanks for the feedback!
- claimred 7y agoDoes it support collaboration mode? As in can I design diagrams with my colleagues?
- __adrien 7y agoHey! I got things i could see that could improve this greatly: - have a dot format (graphviz) importer (and maybe exporter), something simple to allow people to programmatically import/update their existing architecture. - alternatively have a json format, same thing (versioning, hand update, generation etc) - allow with a shortcut (alt key, whatever) to draw links between objects directly. Creating links is tedious right now. I will post more as i'm working with your tool to represent our system :)
- alixanderwang 7y agoThanks for those suggestions! Agreed with all of them, especially having quicker ways to do common actions like add links, will be working on that next.
- drdrey 7y agoFYI the logo looks a lot like the kubernetes logo to me, in case that's unintentional
- dankohn1 7y agoIt's 6 sided, not 7.
- alixanderwang 7y agoAny similarity is unintentional
- still_grokking 7y agoHow is this related to SysML?
- Aeolun 7y agoThe layers are fun, but without some form of linking between elements and layers, it becomes hard to figure out what relationship there is between them. I'd also enjoy a slightly easier way to link things. Having to drag an arrow from the sidebar to the field, then manually link the two points is quite slow. Normally these systems have a sort of handle when you've selected something that allows you to make a new arrow to another item.
- alixanderwang 7y agoI’m working on both those things right now. Thank you for the feedback! In general I wanted to see if people were receptive to this format of diagram before sinking more time into features, because there’s just no stopping point to diagramming features. Now that the concept has gotten some validation, the diagramming tool itself is going to be getting a lot better real soon. I’ll post updates here: https://twitter.com/terrastruct https://twitter.com/terrastruct
- Aeolun 7y agoThanks, I’ve subscribed, not that I look at Twitter that often :)