In short:
ak-tech-graphdraws publish-grade technical diagrams: architecture, data flow, sequence, AI agent systems, comparison tables. It produces an SVG to edit and a 1920px PNG, reviews the exported image and reports the real check status. For a quick diagram that lives inside Markdown,ak-mermaidjs-v11fits better.
Disclosure: I maintain AgentKit and have an affiliate relationship with it: the AgentKit link in this post is an affiliate link; buying through it gets you 30% off.
Summary
Use it when you need a diagram to publish in docs, a README, a blog or slides: architecture that matches the code, a sequence for a dark README, an AI agent illustration, a flowchart in brand colors, a comparison table. You do not need it for a small text diagram inside a document; that is ak-mermaidjs-v11's job.
flowchart LR
A["Description or code"] --> B["ak-tech-graph"]
B --> C["SVG file to edit"]
B --> D["1920px PNG file"]
C --> E["Docs, README, blog, slides"]
D --> E
B --> F["Stop, report evidence when a tool is missing"]It rests on 4 ideas:
| Idea | Question | Example |
|---|---|---|
| Diagram type | Which kind of picture tells the story right? | Layered architecture, data flow, sequence, agent architecture, comparison table, timeline, ER |
| Style | Where will the diagram live, on a light or dark background? | Flat Icon (default) for blogs, Dark Terminal for GitHub READMEs, Blueprint for architecture docs |
| Arrows carry meaning | What do arrow colors and strokes say? | Main flow is a bold solid line, memory writes are dashed, async events are grey dashed |
| Visual check | Is a valid SVG enough? | No. A label over a box or clipped text still passes a syntax check, so the skill opens the PNG to look |
If you give a style or brand colors, the skill keeps them. If the runtime cannot read images, it says clearly that image quality was not checked, instead of claiming it looks good.
Sample prompt to draw architecture from code:
/ak-tech-graph Draw an architecture diagram for the <service name> service based on the code in <folder>.
Layers: client, gateway, services, data layer.
Mark any relation the code does not show clearly as uncertain, do not guess.| Flag | What it is for | Since ak |
|---|---|---|
--output | Picks where to save the SVG and PNG files | 1.0.0 |
After the skill name you write the diagram type or describe the system in plain words, and you can name the style in the same sentence.
Below is the detailed version: the run flow, 5 situations with prompts, the --output flag explained (when to use it, when you do not need it, what you get), the change history by ak release, and common pitfalls. The detailed version and the interactive page are for subscribers. Your agent can also search them through the portal's MCP.
Opens when your account has subscriber access
This guide is for subscribers
Once your account has access, the full piece, the interactive visual and the agent call all open.
- Sign in or create a modernEngineer accountReading access belongs to your account email.
- Choose a plan on the pricing page1, 3 or 12 months, paid by VietQR bank transfer. Access opens about a minute after the money arrives.
- Or redeem a Facebook subscriber codePeople supporting the page on Facebook get an activation code by message each month.
Already a subscriber? Sign in to read.
Use this piece in your agent
Get an API keyCopy the text below and paste it into Claude Code, Codex or whichever agent you use. The agent reads the piece and checks it against the repo you have open.
Read "ak-tech-graph: draw publish-grade SVG and PNG technical diagrams" on modernEngineer and apply it to this repo.
1. Call the content_get tool of the modernengineer MCP server with locale "en", slug "ak-tech-graph". If the modernengineer MCP server is not connected, stop and walk me through connecting it from https://modernengineer.dev/en/mcp.
2. Summarize the main steps of the piece and point out which apply to this repo.
3. Propose concrete changes and ask me before editing any file.Connect MCP in Claude Code (once)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Reading the full piece over MCP needs an API key from a subscriber account or one that bought this guide. Without access, the agent only gets the opening.
- Version
- v1.0.0
- Updated
- 22/10/2026
- Licence
- All rights reserved
- Slug
- ak-tech-graph
