Can 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!
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).
I 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!
Re: sizing: interesting, that’s the first report of it failing, I indeed should do a require desktop version. Are you talking about the landing page or the app? The app uses javascript to detect, the landing page uses page width.
Re:spelling, plural of proper nouns should use apostrophes I think, no? Eg “how many Airbnb’s did you book”. I’m not sure if making those proper nouns was the right choice, I wanted to highlight that they were terms in the app.
Anyway, thank you for the kind words and feedback!
Probably because of weird rules like "children's room" and "four cows' pasture", then the contrary notion that "it's" is incorrect for possessive form because "it is" already used for a contraction of "it is". English sucks.
I'm not a native English speaker and the fact that this is such a common error among native speakers baffles me because the rules that govern these things are very simple. Conventions about when to omit the 's' after the apostrophe differ from one set of guidelines to another (see e.g. https://www.dailywritingtips.com/possessive-of-proper-names-... ), but that's the only non-uniform thing about it.
There's nothing weird about "it's" being incorrect. Pronouns have their own possessive forms. You say her keyboard is white, not she's keyboard is white, and his shirt is yellow, not he's shirt is yellow -- why would you say it's collar is white?
You guys have no idea how easy English is, you should be happy about it and love it and cherish it forever! My native language has a phonetic alphabet, so it's easier to figure out how to pronounce words (i.e. no "lead men in battle" vs "the pipes are made of lead" bullshit). But forming possessives for plurals is waaaay more complicated than "add 's, except if the noun already has an s at the end".
Apostrophes are confusing and overloaded for several purposes.
His report card received four A’s and two B’s.
So, for plurals. Sometimes. Possessives, sometimes, and sometimes omitting the s after an s, other times not. And contractions, where ' is a placeholder for 9 or 10 different things.
""add 's, except if the noun already has an s at the end"
Texas's laws are conservative. (You'll find credible style guides with conflicting advice)
Right, forgot about A's and B's -- we don't use that grading system over here (although, FWIW, I've seen guidebooks that recommend As, Bs and 1s and 2s, because ABCs is also fine and the 1800s is a thing that has to be distinguished from the 1800s'). There's a lot of regional variation, too, which is inevitable considering that English is used from Brisbane to London and from Alaska to California.
But, seriously, every non-constructed language on Earth has exceptions that you have to memorize along with the rules. English doesn't have that many, and it doesn't have too many rules, either. I'm fluent in two other languages (French and my own), and I'm somewhat familiar with a few more languages of Latin, Slavic and Celtic descent. English is a breeze compared to any of them.
Perhaps it's because there's no phonetic difference that native speakers would not have learned the spelling or the rules at the same time, and thus make the error more commonly, due to not having felt a formalized understanding of the rules was necessary.
> Re: sizing: interesting, that’s the first report of it failing, I indeed should do a require desktop version. Are you talking about the landing page or the app? The app uses javascript to detect, the landing page uses page width.
Ah, I'm talking about the landing page. Sorry, I should have been more clear. If it's not something that you can easily reproduce on your end (see this comment: https://news.ycombinator.com/item?id=21960897 ) let me know, I can send you more details about what I'm using.
> Re:spelling, plural of proper nouns should use apostrophes I think, no?
Someone's already answered this -- I'm just chiming in to let you know that this is an extraordinary common error, even among native speakers. I have literally seen C-level executives making it in their emails, and I'm sure it wasn't a typo or something because they didn't get a single damn plural right. So don't feel bad about it. If you're not a native speaker and learned English by yourself, you've likely picked it up from someone who is :-).
(FWIW, I'm not a native speaker, either, I just had really good teachers.)
> I’m not sure if making those proper nouns was the right choice, I wanted to highlight that they were terms in the app.
I don't think that's too big a problem :). I'm fairly sure it's not correct (I don't think they're proper nouns, just like class, object or channel, all of which have specific meanings in the context of one technology or another). But the English language does have a tradition of weird capitalization, and capitalizing them doesn't change anything in terms of meaning. It's not the same as using a possessive form instead of a plural form.
I'm curious, do you (or anyone else) even have an interest in creating diagrams on mobile? It's never crossed my mind as a conducive platform for creating diagram because of the small screen size. I've thought about viewing diagrams in mobile, but again I'm unsure of the desire from other people to do so.
(It isn't too hard to get this working as a viewing platform for mobile)
Same and diagramming seems like something that a tablet touch interface should be good at. I just use the omnigraffle app though so it’s unlikely I’d bother with a webapp tool.
Not really, and I don't really see how that would work on a touch interface. I've seen countless attempts at making tablets (and phones) useful for more than looking at cat pics and watching cat videos and they've all sucked.
But being able to at least easily view diagrams on mobile may be useful, I guess? I'm not sure if it's supported right now.
Hi 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!
I'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.
I think we already have this tool, it's just not a gui but any programming language. I'll quite often create a debug tool to dump out graphviz of something difficult to understand e.g. project structures, syntax trees, call-graphs, components of 3d models etc. It only takes minutes.
The problem I experience is that the gap between raw data and an elegant diagram is really quite large. You mention layout problems. Hairballs and insane wiring is bad (and sometimes unsolvable without abstracting detail) but something even harder is that layout has strong semantic meanings, not too far from the order of words in a sentence. Even a small neat diagram can be really confusing or even misleading e.g. closely conceptually related things get spatially separated, the most important things get tucked into a corner, utter trivia looks like the main flow etc. Layout is a subtle language all of it's own.
In practice I find it requires one-off programs to inject case specific guidance to produce tolerable results e.g. styling certain things, grouping others, complex rules on what to ignore etc. You could wrap up some of these in a gui but it's so computational that it would be a retrograde step.
I 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). There is a free and open-source tool for it: https://www.archimatetool.com/ .
Do 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.
I've used 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.
It's kind of an old-school tool, but Enterprise Architect is a tool that does just this. It's also a completely overwrought model-based engineering thing but ignore that and it's a useful systems/data architecture model database tool.
Sure, for a data integration we needed the “high level” architecture diagram for business users (eg. Database here, data flows into it from azure data factory, which reads it from here, etc).
...and the low level resource group names, networks, firewall rules, etc. so it would actually work.
Exactly the same data, but less detail in the former.
Then the same diagram again, only this time it shows the data flows for the BI team.
The nodes in the diagrams are not different, the connections between them are, and some nodes (eg. Resource groups and NSGs aren’t relevant to some audiences.
Why can’t I have one diagram with layers (I can) that changes the layout to still be a nice diagram when I toggle some layers off (not possible in basically any diagramming tool I’ve ever used).
I run into this kind of issue which detailed architecture diagrams all the time; someone modified a design (or system) and the documentation is instantly out of date in all places except the one they remembered to update.
Um... so tldr; if you’ve ever had to document the exact network architecture down to protocol and port between systems because you actually need that level of detail to make it work, but also want to surface the same data to other people who really don’t care what the different network ranges in dev/sit/prod are.
Could you say that these layers are systems that make up a larger system? So, when you want to view a certain system, you see all its components as nodes. And if you click on a node, you can see its components.
The 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.
That’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).
I'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 :)
That’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!
So 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.
Now I understand. Feedback: landing page should probably focus on communicating this: like draw.io, but gracefully handling paths, cases, alternatives, and scenarios. Good job!
Yeah I’ve gotten more draw.io comments than I expected haha. I didn’t know it was mainstream enough to say “like X for Y”, but I’ll add something to mention it. Thanks for the feedback!
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 :)
Thanks 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.
The 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?
Thanks 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.
The 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.
I’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
After 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.
There 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)
Kudos 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!
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.
I 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))?
I 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?
This 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!
Nice! 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)
There 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.
Same. 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.
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.
Yeah 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.
Please 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.
Hovering 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).
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.
He 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).
Every 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.
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.
As 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.
- 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!