visualcave

A guide for creating technical diagrams as one self-contained HTML file, covering flows, timelines, data relationships, architecture, and other common diagram types.

In plain words
What is it for?
Use it to create flowcharts, sequence diagrams, ER diagrams, state machines, charts, project timelines, kanban boards, and cloud architecture illustrations.
Why use it?
It helps turn a complex technical relationship or process into a focused diagram with a readable structure.

Skill for Claude CodeCodex

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.

agentmods
npx agentmods add skills/varkart/visualcave/visualcave
Any agent
npx skills add varkart/visualcave --skill visualcave
Clone the repo
git clone --depth 1 https://github.com/varkart/visualcave

Made for: Claude Code, Codex.

Per session 78 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,216 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
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.

ModelPer sessionOnce invoked
Fable 5 $0.00078 $0.01216
Opus 5 $0.00039 $0.00608
Sonnet 5 $0.00016 $0.00243
Haiku 4.5 $0.00008 $0.00122

Measured 2d ago against content hash c5e4eab55a27, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

visualcave 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 2d ago.

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.

SKILL.md · 85 lines

How it starts

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

VisualCave

Output a single self-contained .html file. No markdown wrapper unless the user asks for it.

Before You Draw

1. Identify the critical path. Every good diagram has one story — the single flow or relationship the viewer must understand immediately. Name it before writing any Mermaid code. Let it govern which nodes exist and how subgraphs are grouped. Nodes that don't serve the story get cut.

2. Pick scope ruthlessly. Aim for 8–15 nodes. Beyond 20 the diagram becomes unreadable. Group related details into a single labeled node rather than expanding every sub-step.

3. Choose labels like a senior engineer preparing a conference slide — not an autogenerated dump. Node labels: 2–4 words. Edge labels: 1–3 words. Subgraph titles: a noun phrase, not a sentence.

Style rules:

  • Thick strokes (2px), 4px drop shadow, rounded nodes.
  • Warm/cool subgraph alternation: yellow → blue → green → purple → teal → orange.
  • Inter font for UI; JetBrains Mono for code/math labels.
  • Pick the right Mermaid keyword — see references/diagram-types.md.

HTML Template

Read references/template.html verbatim. Replace:

  • [Diagram Title] and [Subtitle] in the header
  • The placeholder Mermaid source inside <div class="mermaid" id="diagram-source"> with the actual diagram

Do not alter the CSS, THEMES object, or script block unless a specific feature requires it.

Colors

classDef works in graph, classDiagram, stateDiagram-v2. For other types use themeVariables.

Class Fill Use for
:::yellow #FFFDE7 Users, browsers, entry points
:::blue #E3F2FD Services, APIs, compute
:::green #E8F5E9 Databases, storage, success
:::purple #F3E5F5 Auth, AI models, security
:::teal #E0F7FA Caching, CDN, external APIs
:::orange #FFF3E0 Queues, events, pipelines
:::note #FFF9C4 Annotations, callouts

Read the full file on GitHub · 85 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.

  1. 2d ago First seen · 85 lines · 78 tokens per session scan A c5e4eab55a27

Subscribe to this mod's changes

visualcave is a skill published in the GitHub repository varkart/visualcave (2 stars, last pushed 1mo ago), licensed MIT. It adds 78 tokens to every session and 1,216 once invoked, about $0.0004 per session on Opus 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-08-31.

Related

Other skills, from other repositories

lov-document-illustrator

为文档原地插入 AI 配图。读取文档后全局规划插入点,并行生成所有图片, 异步插回原文。支持封面图、自定义比例和三种风格。 Use when: 用户要求为文档/文章/笔记生成配图、插图。 Also trigger when user mentions: 配图、插图、illustration、 generate images、document images、为文章加图。.

lovstudio/skills · 100 tokens

lov-image-creator

Generate images via multiple mechanisms. Supports: (1) End-to-end AI generation via Gemini/ZenMux — given a prompt, directly output an image. (2) Code-based rendering — generate HTML/React single-file, render to PNG via Playwright. (3) Prompt engineering — generate optimized prompts for external models…

lovstudio/skills · 102 tokens

lov-media-selection

比较媒体候选的剪辑版本、画质、编码、体积、音轨、字幕、活跃度与证据,自动选出最合适版本;适用于“哪个版本最值得下”、"choose the best compact release"。.

lovstudio/skills · 58 tokens

lov-media-verification

使用 ffprobe 验证已下载视频的可读性、时长、分辨率、编码、音轨、字幕和剧集完整性;适用于“检查下载是否完整”、"verify the downloaded media",输出结构化验收报告。.

lovstudio/skills · 59 tokens

resemble-detect

Deepfake detection and media safety — detect AI-generated audio, images, and video, trace synthesis sources, and analyze media intelligence using direct Resemble AI API calls.

resemble-ai/detect-skill · 38 tokens

timeline-roadmaps

Create animated timelines and project roadmaps using the Excalimate MCP server. Use when asked to visualize project timelines, product roadmaps, release schedules, sprint plans, historical sequences, milestones, Gantt-style views, or any chronological sequence — even if the user just says "show the plan" or "roadmap.".

excalimate/excalimate · 68 tokens