TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Ask HN: Visualize Software Architecture/Concepts

29 点作者 biosboiii9 个月前
So my dayjob is working in a software project with dozens of teams, hundreds of employees.<p>Common denominator that nearly everyone knows nothing about software, except some subcontractors who are not part of our processes.<p>So in every meeting I need to explain simple concepts like what the API of the service I designed is going to in the context of our whole software context, and currently this is done by fiddling around on draw.io and with my hands and feet.<p>Can anyone of you guys recommend me some tool, or format, to explain software architecture to non-technical folks, gentle-parenting style?<p>Thx in advance :)

14 条评论

tinix9 个月前
<a href="https:&#x2F;&#x2F;c4model.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;c4model.com&#x2F;</a><p><a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;C4_model" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;C4_model</a><p>Level 1: System context diagram<p>Level 1, a system context diagram, shows the software system we are building and how it fits into the world in terms of the people who use it and the other software systems it interacts with.<p>Level 2: Container diagram.<p>Level 2, a container diagram, zooms into the software system, and shows the containers (applications, data stores, microservices, etc.) that make up that software system. Technology decisions are also a key part of this diagram.<p>Level 3: Component diagram<p>Level 3, a component diagram, zooms into an individual container to show the components inside it. These components should map to real abstractions (e.g., a grouping of code) in our codebases.<p>No need to go deeper considering your audience.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;plantuml-stdlib&#x2F;C4-PlantUML">https:&#x2F;&#x2F;github.com&#x2F;plantuml-stdlib&#x2F;C4-PlantUML</a>
solardev9 个月前
Do they really need (or care) to know the underlying architecture? Typically the non technical audiences I&#x27;ve worked with care more about how it solves their problems, how much it costs, who responds when something goes down (and how long it takes), what your pros and cons are compared to the competitors, etc. They typically glaze over at the architecture part or take a picture of it and send it to the devs afterward.<p>Why do they need to know what an API is, rather than what your integration will do for them and how it works with their existing system and process? That kind of stuff belongs in the appendix, at a very high level of abstraction (ie your software sits here, ours is here and connects to it, this is your workflow before and after). If you&#x27;re going into C4 territory and explaining your whole stack, that&#x27;s probably way too much detail that&#x27;s not relevant to them and also may change later anyway. My 2c is to focus on the what and why, less so the how. Tell them their devs can reach out to you separately for a technical deep dive if they need it.
评论 #41233376 未加载
keisku9 个月前
- <a href="https:&#x2F;&#x2F;excalidraw.com" rel="nofollow">https:&#x2F;&#x2F;excalidraw.com</a> - <a href="https:&#x2F;&#x2F;mermaid.js.org" rel="nofollow">https:&#x2F;&#x2F;mermaid.js.org</a>
评论 #41221113 未加载
eternityforest9 个月前
Excalidraw is my favorite drawing tool for diagramming, by far. I even embedded it directly into an app so you can draw labels for buttons.
评论 #41224635 未加载
wishpal9 个月前
I use draw.io as well but also find creating message sequence charts using - <a href="https:&#x2F;&#x2F;sequencediagram.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;sequencediagram.org&#x2F;</a> very useful for the teams to understand the workflows. Rather MSC is something I have made mandatory for certain complex workflows which involve multiple apps and services.
vladsanchez9 个月前
<a href="https:&#x2F;&#x2F;www.ilograph.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.ilograph.com&#x2F;</a>
iAkashPaul9 个月前
Apart from draw.io I like to use isoflow.io for near isometric diagrams with directional flows as well
Glimjaur9 个月前
C4 modelling (with associated diagrams using whatever tools) can be powerful, part of the value is that they help capture the nested and relational nature of many software systems.<p><a href="https:&#x2F;&#x2F;c4model.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;c4model.com&#x2F;</a>
imvetri9 个月前
Write a code base scanner that traces source of all identifiers.<p>This can generate data flow diagram.<p>Run the scanner across codebases, you get entire distributed software&#x27;s flow.<p>There will be loose ends because of urls formed from configurations. It&#x27;s fine, make it work, then improve.
DrDeadCrash9 个月前
I&#x27;ve used draw.io, mermaid using polyglot in vs-code, obsidian canvas diagrams, and gherkin with a cucumber plug-in for visual studio (req n roll ?).... non-technicals still don&#x27;t get it, but at least they know they didn&#x27;t get it ...
评论 #41221054 未加载
mikewarot9 个月前
Explain it in terms of paper forms and bureaucrats. You&#x27;ve got a form that gets submitted, and replies come back in other very structured forms.<p>Your API is the person who handles the form. Just ride that analogy, and you should do fine.
constantinum9 个月前
Try <a href="https:&#x2F;&#x2F;monodraw.helftone.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;monodraw.helftone.com&#x2F;</a>
fiftyacorn9 个月前
I like gliphy - i can use layers and show each team the relevant information. I can also use links to confluence pages<p>I also use plantuml a lot
yamumsafknho9 个月前
lucid.app<p>drawio is ugly but free<p>excalidraw has weird hotkeys