
Show HN: Terrastruct – A Diagramming Tool for Systems - alixanderwang
https://terrastruct.com/
======
alxlaz
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!

~~~
alixanderwang
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)

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

~~~
dkersten
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.

------
alixanderwang
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!

~~~
wokwokwok
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.

~~~
gugagore
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](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
Does a common Structure Element 'sub-type' naming repository (Lexicon) exists
for Archimate?

like
[https://nominatim.openstreetmap.org/](https://nominatim.openstreetmap.org/)
but for IT technologies.

[https://architecture-center.com/blog/125-archimate-
metamodel...](https://architecture-center.com/blog/125-archimate-metamodel-
tips-to-understand-it-better-part-1.html)

------
d--b
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.

~~~
ailideex
If 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...](https://asciidoctor.org/docs/asciidoctor-
diagram/#creating-a-diagram)

------
shishy
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 :)

~~~
alixanderwang
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!

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

~~~
alixanderwang
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.

~~~
mahesh_rm
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!

~~~
alixanderwang
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!

------
__adrien
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 :)

~~~
alixanderwang
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.

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

~~~
alixanderwang
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.

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

~~~
alixanderwang
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](https://twitter.com/terrastruct)

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

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

~~~
blatherard
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.

~~~
alixanderwang
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)

------
vinodkd
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!

------
based2
alt: [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)

~~~
joshwa
[https://sparxsystems.com/products/ea/](https://sparxsystems.com/products/ea/)

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

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

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

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

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

~~~
alixanderwang
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!

~~~
joaomacp
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)

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

~~~
alixanderwang
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!

------
berkayozturk
I highly recommend [https://draw.io](https://draw.io)

~~~
alixanderwang
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.

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

~~~
alixanderwang
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.

~~~
vinodkd
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.

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

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

------
starefossen
Any thoughts on support for textual representation of the diagrams?

~~~
alixanderwang
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.

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

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

~~~
freeballer
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.

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

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

------
bbmario
How is this different from draw.io?

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

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

~~~
alixanderwang
Any similarity is unintentional

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

~~~
alixanderwang
I'm using this low level SVG library:
[https://svgjs.com/docs/3.0/](https://svgjs.com/docs/3.0/)

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

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

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

------
topspin
Any relationship to terraform?

~~~
alixanderwang
Nope

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

~~~
alixanderwang
Thanks! 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.

------
still_grokking
How is this related to SysML?

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

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

~~~
shapiro92
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.

