Show HN: Terrastruct – A Diagramming Tool for Systems | Hacker News Reader

Show HN: Terrastruct – A Diagramming Tool for Systems

terrastruct.com

187 pointsalixanderwang99 comments

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!

Are 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).

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!

Your nitpicks are absolutely welcome!

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!

Apostrophe-s marks possession. Plurals of regular nouns are always formed without apostrophes.

Plural of Airbnb is Airbnbs.

Compare this to "Airbnb's fifth year was terrific" where the apostrophe marks possession. Whose fifth year was terrific? Airbnb's.

Wow why did I think proper nouns used apostrophes for plurals, oof. Fixed. Thank you and OP of comment!

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)

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.

I experimented with it on my iPad, and came away frustrated. I definitely like to use my iPad when practical.

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.

I use draw.io a lot and I can't imagine trying to do anything productive with it on mobile. Viewing diagrams would definitely be appreciated.

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!

The UI iterations of this app over 2 years: https://twitter.com/alixanderwang/status/1212875949101875200

Some educational content made with this tool:

An overview of modern Javascript tools https://app.terrastruct.com/diagrams/788622353

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.

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.

1: https://github.com/Netflix/vizceral

That’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.

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/ .

Does a common Structure Element 'sub-type' naming repository (Lexicon) exists for Archimate?

like https://nominatim.openstreetmap.org/ but for IT technologies.

https://architecture-center.com/blog/125-archimate-metamodel...

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'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.

My workflow is something like this:

- define the elements at various zoom levels https://structurizr.com/share/1/explore/tree

- define the relations 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

Can you give examples of the multiple views of the same data? Maybe you can use a past project where you needed this.

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.

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.

https://sparxsystems.com/products/ea/

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.

If you use Kubernetes you might find ArgoCD and Weave Scope interesting, both _sort of_ do this

If you just want links to logs then you can use draw.io and export an 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...

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).

We have developed something on these lines. Please send me an email omkar@wynum.com for a demo.

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!

Hmm. Can you expand further? I also use draw.io and a quick look at your landing page did not enlighten me.

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!

Hey!

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

Thanks, I’ve subscribed, not that I look at Twitter that often :)

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.

I 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.

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!

alt: https://www.archimatetool.com/ https://plantuml.com/archimate-diagram

https://c4model.com/ https://news.ycombinator.com/item?id=21032805

Thank you for this! C4model seems extremely useful!

https://sparxsystems.com/products/ea/

I'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.

You should consider adding a premium paid version, in addition to your enterprise version. This could add a lot of revenue to your bottom line.

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))?

Mermaid.js may be what you are looking for. Draw. Io is also open source and has desktop client

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!

Well then I really need to download this.

Yes, WSD is awesome.

I 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)

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.

Thanks for the feedback!

I highly recommend https://draw.io

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.

Nice 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.

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).

This is an excellent suggestion, I might just do that. Thanks!

Any thoughts on support for textual representation of the diagrams?

What 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.

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).

Ah. Yeah if this is something people use and I can support myself with it, I would love to work on adding that.

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.

You might be interested in Svgbob https://github.com/ivanceras/svgbob and AsciiGrid: https://mbarkhau.keybase.pub/asciigrid/

Would be nice to have examples, so after login user can use them, to check how tool is working, what are layers and scenarios.

Yeah you're right, I should allow users to load examples. Thanks!

How is this different from draw.io?

See the thread above (currently), I responded there on this question.

FYI the logo looks a lot like the kubernetes logo to me, in case that's unintentional

It's 6 sided, not 7.

Any similarity is unintentional

Curious, what JS libs are you using for the drawing? Or is it a pure “from scratch” thing?

I'm using this low level SVG library: https://svgjs.com/docs/3.0/

Ah that’s cool. Any reason you picked that over a canvas implementation?

TBH, I saw that's what another popular diagramming tool was using.

Does it support collaboration mode? As in can I design diagrams with my colleagues?

Any relationship to terraform?

Nope

Definitely an advancement over draw.io however isnt this just mermaid diagrams?

Thanks! Are you referring to this? 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.

How is this related to SysML?

> This is an iFrame of a diagram [...]

Why do I give a shit as a potential user that this is an iFrame?

because 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.

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.

Reply on news.ycombinator.com