A diagram skill fetches real logos, then asks twice before putting your stack online

A diagram of your stack can leave your computer looking considerably more organized than the stack itself. The agent skill stack-diagram takes a description of the connections and fetches real product logos, sparing the model the job of inventing a cloud icon that looks almost familiar. The logo has its act together, anyway.

The README’s first example starts with a web front end, an API, a database, authentication and payments. Its rendered picture labels the paths between them. Another example maps development tooling, including the relationship between a workspace, checks and publishing. The skill can draw the machinery that ships an app as well as the services that run it, which is handy when the build process needs its own explanation (and possibly an intervention).

Logos come from a documented sequence of sources: svgl, devicon, gilbarbara/logos or the brand’s own repository. Cloud architecture icons come from the vendors’ packages. The output rules prohibit recoloring or redrawing those logos. That removes one familiar diagramming chore: hunting down an image that doesn’t become a blurry postage stamp when somebody enlarges the slide.

The README also promises “No arrows through text,” and says the agent renders and checks the result before handing it over. A connector running through a label can leave two services in an accidental relationship. Keeping the arrows legible helps the next person trace what actually reaches the database; an impressive logo collection cannot answer that by itself.

The default export is one HTML file with fonts and logos inlined. PNGs and a dependency-free React component come from that same file. Both light and dark versions are rendered, while the logo tiles stay white to preserve their colors. The skill needs network access while fetching assets; the completed HTML is intended to open without that connection. Portable comes after the downloading, rather than by pretending the network never existed.

Setup has some weight behind that single sentence of input. The project requires Python 3.9 or newer, and PNG export uses Playwright with Chromium. It is an agent skill, documented for several coding assistants, rather than a standalone drawing application. This account follows those files and examples; it does not establish that an installed agent obeys every routing or sharing instruction.

The optional gallery creates a second destination for the result. According to the README, the agent offers once, previews the public material and requires two affirmative answers. That material includes light and dark PNGs, an English title, the technology stack and a display name. A GitHub login is optional; its stated purpose is allowing a post to be deleted later, while keeping the login out of public view.

The project’s assurance that the prompt stays private therefore has a narrow meaning. Someone can omit the original sentence while publishing a picture that identifies the same services and connections. Two confirmations give a person another chance to catch that disclosure; the enforcement still depends on the agent following the skill. The attractive export is precisely the file that needs inspection before it gets an audience.

Even the arrows have an audience now.