Launch HN: IcePanel (YC W23) – Onboard engineers with explorable system designs

3 years ago

Hey HN, Victor and Jacob here. We’re excited to show you what we’ve been building over the last couple of years! IcePanel (https://s.icepanel.io/vmHvBHr4BeMEOa/bPBR) or leaves a comment with thoughts and feedback. Happy to chat!

As a consultant, I love this.

As an employee however; nobody on my team, nor my projects, nor my wider organisation will spend the time to keep these updated.

We can barely keep public-facing API documentation up-to-date. Diagrams like this are an order of magnitude harder to keep up-to-date, and Solution Architects will refuse to go to this level of detail, as they'd actually have to think through the problem and do some actual system design.

But as a consultant, I'm going to use this in my kick-off projects and my proof-of-concepts, and it's going to dazzle everyone. But maybe 5% of my clients would pay me to do detailed diagrams or documentation like this.

EDIT: OK, unfortunately the initial onboarding is overwhelming and underwhelming at the same time. I'm used to ArchiMate, I'm used to draw.io, I'm used to Visio, I'm used to plantUML. You've taken some of the existing design patterns but made them different enough it feels uncomfortable.

The initial onboarding needs significantly more work. Dumb down the default, initial view. I don't need "Start Trial", I don't need "Help", I don't need "Invite", I don't need "Embed", I don't need whatever the fuck "Landscape recommendations" is, I don't need wait what the fuck is "Link to reality" and how is it different to the "Share" part of "Embed and Share"? Why is there some sort of animal I can't make out with a party hat on it next to it? Oh Link to reality is a "fun" play on syncing with a backend repo.

Wow! I absolutely love this! I will have to try it! Better C4 tooling has been something in the back of my mind for a while and this looks pretty polished.

I do have some concerns on pricing. $30-40/editor/month is pretty steep! Unless there are good tools for managing swapping users in and out of "reader" vs "editor" states across billing cycles, I think a lot of orgs will balk at this pricing. I know mine will if 98% of our ENG team isn't editing except maybe once a year.

  • I came here to echo the pricing sentiment. I just encountered this problem and documented my company's architecture using Whimsical. I felt it was lacking.

    We're a <10 person start-up. $40/mo seems too much relative to how often we'd use the tool. I would use this tool if there was a cheaper option ($10/mo/editor) for a team of our size.

  • Awesome, let us know your thoughts/feedback!

    We have ideas to increase the capability of readers to make edit suggestions, that can be accepted by an editor. This way you can have some of the more junior team members included in the reader count.

    How would this sound for you?

    • That's a good start!

      Ultimately, I'm not just not sure what the right billing model here is. Obviously, I want to pay a "reasonable amount", but I understand you need that model to have some kind of payment floor. :)

      Some major components of usage/pricing that I can think of:

      - Domain Owners - some users will be subject matter experts or DRIs that have ownership over parts of the overall model. These are more likely to be editors, but even other engineers may have small tweaks (edit suggestions) for a domain someone owns

      - Any given engineering user will probably not be editing for the vast majority of the time. This + your existing pricing model + edit suggestions would lead to "editors" functioning more as just "approvers". It pushes an org to have a handful of approvers and the rest of their users as commenters.

      - high price anchoring - $40/user/month sounds like a lot, even if it's for only a few users. It's also a more complicated user model that makes it more difficult to integrate into IT organizations. It is easier to integrate all users uniformly at a lower price per seat. And if I have 10 people on my team, $4/user/month is the same as having one editor but far more palatable (to me).

      1 reply →

Every time I try and use this I get completely overwhelmed by the UI. I love the idea of being able to set a mode/scope of editing only a small chunk of infra, then exit or zoom out to a higher level and glue that block to another block, losing all that high resolution while still being able to dive back in and see more detail again. But yeah, I have tried a lot of times now to use this tool and it is always super overwhelming. I just want to draw boxes, enrich them, glue them as needed but this is like a whole new IDE and programming environment with lots of specific terminology.

  • Great feedback. Is the C4 model something you had explored before? I'm wondering what areas you find most overwhelming as the idea of drawing boxes, enriching them is the simplicity we're aiming for.

Not sure if you’re intending this to be usable on mobile but I found some usability issues from a few minutes browsing on iPhone (I most definitely intend to have a proper look on desktop later - looks fantastically useful): 1- overlapping text/images in header; 2- list of steps was the first thing that was open - took me a minute to understand I could close that to get to the diagram; 3- I couldn’t work out how to zoom in on the diagram (it was very small) - the expected pinching didn’t work;

  • We haven't focused on making the editor mobile friendly as most diagrams are too complex for such a small screen - hence why it sucks on mobile. I'm sure it's something we could improve later on as an "on the go" mode, but for now it's not been a priority. Is there a use case to use this on a phone?

    • > Is there a use case to use this on a phone?

      You should probably be thinking of it the opposite way, is there a reason people wouldn’t use it on their phones? It’s on the web, the web is on your phone! People use their phones all the time for work-related things so they are going to expect this to be available there, too.

      5 replies →

    • It seems like a sensible choice that mobile isn’t your focus - I’m just chilling on the sofa browsing HN after work… I don’t think I know the product well enough to comment on a mobile use case, but I’ll let you know if I think of something when I take a further look

    • iPad Pro would be good; I have multiple enterprise clients where many of the in-person conversations include showing people diagrams on iPad Pro tablets, and editing them on the fly.

Is the next step creating and updating these diagrams automatically? That dream seems to come up and die in cycles over the years, but it may be possible now depending on the compute platform and network appliances you use. This push to automate by doing interesting things, like reading your network traffic (https://www.akitasoftware.com/), could work here.

I'm unsure, as is, how you fix the organizational and human problem: It takes effort to initially create these diagrams, and constant work to keep them updated as systems evolve. How do you make that easier? A more fancy diagram explorer seems... not as useful.

  • > I'm unsure, as is, how you fix the organizational and human problem: It takes effort to initially create these diagrams, and constant work to keep them updated as systems evolve. How do you make that easier?

    This is one of my primary goals with Ilograph[0] because, as you noted, diagrams that are hard to maintain don't get maintained (and very quickly lose value). It takes a three-pronged approach to solving it:

    1. Model-based diagramming. All components in the diagram are part of a model. This means components can be used in many different diagrams (called perspectives in Ilograph) and kept in sync. It's kind of like having static type checking for your diagrams.

    2. Diagrams are 100% laid out by machine. Diagrams created using drag-and-drop tools are practicably unmaintainable[1].

    3. Perhaps most important, the tool has a full IDE with autocompletion to assist with developer ergonomics. Every little bit helps.

    [0] https://app.ilograph.com/ [1] https://www.ilograph.com/blog/posts/its-time-to-drop-drag-an...

    • I finally got a chance to try this, and I'm impressed. I love the interactive examples right on the site. I'm coming from Mermaid[0], which falls more under 'pure diagramming', where as this is...systems diagramming. Thanks for sharing it.

      0: https://mermaid.js.org/intro/

  • I think this is purely a tech industry problem of move as fast as possible. Other engineering disciplines have detailed diagrams (breakdown of car parts for example and how to put it back together). It is just not a priority in the tech industry. Until regulation forces fines for software bugs or outages there will never be a priority to pay people to maintain documentation.

  • Automatically generated diagrams seem to be the dream for many of the developers we chat to, however we don't see this working as great as they believe. This is due to "the model code gap" which is where the abstractions we use to discuss software architecture rarely matches 1:1 with the source code. You can read more about this on our blog article below.

    https://blog.icepanel.io/2022/11/30/the-model-code-gap

    We think this is more of a human/organizational problem rather than a technical one and we have tons of ideas about how to use links to reality to help humans keep docs up to date. For example an object which has had a lot of commit history recently probably needs the diagrams or docs updating.

    • I'm not sure I understand. A system diagram from source code or infrastructure alone is difficult, but adding some constraints and boundaries may help?

      What if we only cared about http based services and the boundary is at the service layer? A sidecar running alongside your deployed service keeps track of incoming and outgoing network requests. Each sidecar is configured with metadata: The service name, hierarchy -- it belongs to this even larger service, it's this architecture, and using this runtime, ....

      Collecting all of this telemetry along with the metadata would allow you to generate a graph of services in the entire system, who their callers are, and what they call, right? Even that's helpful as a starting point, where I can then go in and fill in the details. When I add a new service, it shows up automatically and is flagged for me to review.

      2 replies →

This is very interesting. I had never heard of the C4 model before and will be using it going forward.

I'm skeptical that the current solution will be completely immune from doc rot but it certainly seems like there should be some way to generate/validate these diagrams from code. For example, there are many natural parallels between the flows diagrammed in your tool and setting up user journeys for E2E integration testing.

  • We're big believers that the C4 model gives a good lightweight approach and guidance for those who struggle to articulate the complexities of software.

    Currently the code checks work through manual set up and won't remove all doc rot for sure, but indicates when drift is happening. This helps both direct to what code/resources are of interest (onboarding new hires), and also checks it still exists in the source control. More smarter checks to continue removing doc rot are planned.

> Most diagramming tools are generic and flexible for any purpose. This is great for quick sketches and whiteboarding but painful for creating longer-term documentation where it’s important for objects to contain metadata and have relationships with other objects.

I'd suggest to change this copy writing to "any purpose - which is great". Was a bit confused while reading, had a bit of disconnect.

Couple UX nits from my first experimentation (though you may have already considered and have good reasons for current implementation!)

- normal scroll (instead of ctrl+scroll which is typically used for making text larger) for zooming in / out

- holding center mouse button to pan around (currently scrolls page instead)

  • On the web at least I am used to ctrl/cmd+scroll to zoom, shift+scroll for horizontal pan and scroll for vertical scroll.

    Middle mouse drag should definitely pan.

  • I believe this is a matter of individual preference and I think providing users with options to change these mechanics would be great! I 100% agree that center mouse + move should pan. But I also prefer the current scroll and I would like Shift+Scroll to scroll horizontally (as it does on any other web page).

I love this, and will be giving it a proper try later this week. For years I’ve been talking about wanting a diagramming tool that can give a super high-level view when needed, but which allows zooming in to individual components in order to get more detail.

"Explore yourself" sounds like advice from a self-help book. Something like "Explore on your own" or "See for yourself" is clearer; or even just something like "Explore the editor" would be fine.

As a customer since 2021, is this re-launch HN?

Loved the concept, found it fell over for real-sized things on even the most powerful machines, had to switch to Structurizr to do our C4 modeling: https://structurizr.com/

Was very disappointed, bet I'd get more devs to model architecture with this tool. If it's relaunching because perf problems were resolved, will look forward to try it again.

Depending on scope of people's needs, either highly recommended or, try it first.

Hats off to Victor for great support back then, and I see the docs are a reflection of that, like this section on embedding into popular tools:

https://docs.icepanel.io/features/sharing#embedding-share-li...

TL;DR: Helpful team, thoughtful UI, thoughtful docs, a product capability (c4 modeling) very worth understanding and using.

  • Thanks for your response, sorry to hear you moved away due to performance limitations.

    We've been working hard to improve our performance/scalability for large models over the last couple of years. We shipped major updates in this area recently so I'd be interested to hear when you last used the tool.

    I'd love to dig into what issues you had so we can make sure they're resolved for you/other people.

    Please reach out to me at mail@icepanel.io

I love this! It's exactly what I've been looking for and checks some boxes for things I've needed for a long time in a modeling (vs diagramming only) tool. I discovered C4 a few months back, so finding that it has C4 support is awesome.

Would you be willing to elaborate a bit on what frameworks, tools, and technologies are used to create IcePanel? Anything you're willing to share, and specifically I'm curious if you used React Flow.

you still did not learn that if you want to show off your work, you dont ask for signing up or any of that BS. it's 2023