What is dym-diagram-design-authoring-in-chat?

A chat-based tool for creating diagrams as self-contained HTML files with inline SVG graphics and styling. SVG is a text format for scalable drawings, so the result can be opened directly without a build step or web server.

Use it for architecture diagrams, project quadrants, request sequences, and other supported visual explanations.

It turns a description of a system, process, or comparison into a shareable diagram file. The required confirmation step helps ensure the chosen diagram matches what you want to show.

dym-diagram-design-authoring-in-chat — Skill by Rheinmir/setup

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add Rheinmir/setup --skill dym-diagram-design-authoring-in-chat

Clone the repo

git clone --depth 1 https://github.com/Rheinmir/setup

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/rheinmir/setup/dym-diagram-design-authoring-in-chat/github.svg)](https://agentmods.dev/skills/rheinmir/setup/dym-diagram-design-authoring-in-chat)

Your own site

<a href="https://agentmods.dev/skills/rheinmir/setup/dym-diagram-design-authoring-in-chat"><img src="https://agentmods.dev/badge/skills/rheinmir/setup/dym-diagram-design-authoring-in-chat/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/rheinmir/setup/dym-diagram-design-authoring-in-chat"><img src="https://agentmods.dev/badge/skills/rheinmir/setup/dym-diagram-design-authoring-in-chat.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 71 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 2,996 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00071	$0.02996
Opus 5.5	$0.00028	$0.01198
Sonnet 5.5	$0.00014	$0.00599
Haiku 4.5	$0.00007	$0.00300

Measured yesterday against content hash 1438a4e03609, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

dym-diagram-design-authoring-in-chat scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.overstack/doyourmagic/diagram-design/skills/dym-diagram-design-authoring-in-chat/SKILL.md · 211 lines

How it starts

The opening of the file, as written. The whole thing — 211 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Skill: dym-diagram-design-authoring-in-chat — Vẽ sơ đồ bằng chat (không có CLI cho việc này)

Vì sao dùng: đây là công dụng chính của tool. Không có lệnh shell nào tạo sơ đồ — việc chọn loại, chọn nội dung và viết SVG là do agent làm, dựa trên SKILL.md và các file references/type-*.md.

File này sinh ra gì: một file .html tự chứa (inline SVG + inline CSS), mở được bằng file://, không cần build, không cần server.

Toàn bộ file này là câu gõ trong chat. Đừng dán vào terminal. Phần shell nằm ở 04 và 06.

1. Câu gõ tối thiểu

Make me an architecture diagram of my app: frontend, backend, database, Redis cache.
I need a quadrant showing Q2 projects by impact vs effort.
Give me a sequence of a bearer call with token refresh on 401.

Agent sẽ: chọn loại → nạp references/type-<loại>.md tương ứng → xác nhận với bạn trước khi vẽ → dựng HTML → lưu file.

Bước xác nhận là bắt buộc theo SKILL.md §3 ("Confirm before drawing"). Nếu agent vẽ luôn không hỏi, nó đang bỏ qua skill.

2. Chọn loại — 39 lựa chọn, chọn theo thứ bạn đang thể hiện

SKILL.md §3 không hỏi "bạn muốn sơ đồ gì" mà hỏi "bạn đang cho thấy cái gì". Bảng rút gọn theo nhóm:

Cấu trúc & hệ thống

Đang cho thấy…	Loại
Thành phần + kết nối trong một hệ thống	Architecture
Cảnh quan IT cũ nhóm theo phase/phòng ban (trạng thái before của đề xuất hiện đại hoá)	IT current-state
Phần mềm chạy ở đâu — zone, host, artifact, replica, port	Deployment
Cái gì phụ thuộc cái gì, có fan-in và chu trình mà cây không diễn đạt được	Dependency graph
Phân cấp bằng bao chứa / phạm vi	Nested
Quan hệ cha → con	Tree
Sở hữu/báo cáo/định tuyến/escalation của người hoặc agent	Org chart
Các tầng trừu tượng xếp chồng	Layer stack
Class + operation + kế thừa + composition	UML class

Luồng & thời gian

Đang cho thấy…	Loại
Logic quyết định có nhánh	Flowchart
Thông điệp giữa các actor theo thứ tự thời gian	Sequence
Trạng thái + chuyển tiếp + guard	State machine
Quy trình liên phòng ban có bàn giao	Swimlane
Sự kiện đặt trên trục thời gian	Timeline
Task và phase trên timeline	Gantt
Chu trình tự tăng cường (flywheel), bước cuối nuôi bước đầu	Loop
Quy trình tuần tự nhiều actor có bàn giao dữ liệu	Process
Hành trình người dùng qua các giai đoạn + cảm xúc	User journey
Xương sống câu chuyện cắt theo release, có đường cắt	Story map
Công việc theo trạng thái, có WIP limit và mục bị chặn	Kanban

Read the full file on GitHub · 211 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

yesterday First seen · 211 lines · 71 tokens per session scan A 1438a4e03609

Subscribe to this mod's changes

dym-diagram-design-authoring-in-chat is a skill published in the GitHub repository Rheinmir/setup (11 stars, last pushed 20d ago), licensed MIT. It adds 71 tokens to every session and 2,996 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-11-07.

Design and UX

dym-diagram-design-authoring-in-chat next to 6 skills from other repositories
Mod	Type	Stars	Last push	Licence	Scan	Tokens	Works with
dym-diagram-design-authoring-in-chatRheinmir/setup	Skill	11	20d ago	MIT	A	71	Claude Code
webgl-holographic-foilnexu-io/open-design	Skill	107k	today	Apache-2.0	A	41	Claude Code, Codex
html-ppt-hermes-cyber-terminalnexu-io/open-design	Skill	107k	today	Apache-2.0	A	53	Claude Code, Codex
html-ppt-taste-brutalistnexu-io/open-design	Skill	107k	today	Apache-2.0	A	78	Claude Code, Codex
visual-ralphYeachan-Heo/oh-my-codex	Skill	34k	today	MIT	A	52	Codex
glance-canonical-layoutsandroid/skills	Skill	10k	2d ago	Apache-2.0	A	56	Claude Code
accessibilitymicrosoft/hve-core	Skill	1.6k	yesterday	MIT	A	47	Claude Code