Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions .agents/plugins/marketplace.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
{
"name": "visualcave",
"interface": {
"displayName": "VisualCave"
},
"metadata": {
"description": "Interactive diagram generator — flowcharts, sequence, ER, class, state machines, mind maps",
"version": "1.0.0"
},
"plugins": [
{
"name": "visualcave",
"source": {
"source": "local",
"path": "."
},
"policy": {
"installation": "AVAILABLE",
"authentication": "NONE"
},
"category": "Developer Tools",
"interface": {
"displayName": "VisualCave",
"shortDescription": "Interactive diagram generator — flowcharts, sequence, ER, class, state machines, mind maps",
"developerName": "varkart",
"websiteURL": "https://varkart.github.io/visualcave"
}
}
]
}
47 changes: 29 additions & 18 deletions .claude-plugin/marketplace.json
Original file line number Diff line number Diff line change
@@ -1,21 +1,32 @@
{
"name": "visualcave",
"title": "VisualCave — Technical Diagrams",
"description": "Generate interactive, publication-quality technical diagrams as standalone HTML files. Powered by Mermaid.js — supports 11 diagram types including flowcharts, sequence diagrams, ER diagrams, class diagrams, git graphs, mind maps, and more.\n\nFeatures: dark/light mode toggle, step-through reveal for walkthroughs, hover highlight, and export to PNG/SVG/PDF/GIF via capture.js.",
"version": "1.0.0",
"category": "visualization",
"keywords": [
"diagram",
"mermaid",
"infographic",
"flowchart",
"architecture",
"ER diagram",
"sequence diagram",
"visualization"
],
"author": "varkart",
"repository": "https://github.com/varkart/visualcave",
"homepage": "https://varkart.github.io/visualcave",
"license": "MIT"
"id": "visualcave",
"owner": {
"name": "varkart"
},
"metadata": {
"description": "Interactive diagram generator — flowcharts, sequence, ER, class, state machines, mind maps",
"version": "1.0.0",
"category": "Developer Tools"
},
"plugins": [
{
"name": "visualcave",
"source": "./",
"description": "Design and render interactive technical diagrams as standalone HTML files. Powered by Mermaid.js with dark mode, four theme presets, step-through reveal, hover highlighting, and one-click SVG/PNG/PDF export. Zero runtime dependencies.",
"version": "1.0.0",
"author": {
"name": "varkart"
},
"keywords": [
"diagram",
"mermaid",
"flowchart",
"architecture",
"visualization",
"interactive"
],
"category": "Developer Tools"
}
]
}
27 changes: 14 additions & 13 deletions .claude-plugin/plugin.json
Original file line number Diff line number Diff line change
@@ -1,23 +1,24 @@
{
"name": "visualcave",
"description": "Generate interactive technical diagrams as standalone HTML files. Powered by Mermaid.js. Supports flowcharts, sequence diagrams, ER diagrams, class diagrams, state machines, timelines, mind maps, git graphs, pie charts, and quadrant charts. Dark mode, step-through reveal, and export built in.",
"description": "Design and render interactive technical diagrams as standalone HTML files or embeddable Astro/MDX components. Supports 11 Mermaid diagram types with dark mode, step-through reveal, hover highlighting, and one-click SVG/PNG/PDF export.",
"version": "1.0.0",
"author": {
"name": "varkart",
"url": "https://github.com/varkart"
},
"homepage": "https://varkart.github.io/visualcave",
"repository": "https://github.com/varkart/visualcave",
"license": "MIT",
"keywords": [
"diagram",
"mermaid",
"infographic",
"flowchart",
"architecture",
"technical-diagram",
"visualization"
"visualization",
"interactive",
"dark-mode",
"svg",
"export"
],
"skills": ["./"],
"interface": {
"defaultPrompt": [
"/visualcave — how OAuth 2.0 works",
"/visualcave — transformer architecture with step-through guide",
"/visualcave — order lifecycle state machine",
"/visualcave — microservices architecture overview"
]
}
"skills": ["."]
}
42 changes: 32 additions & 10 deletions .codex-plugin/plugin.json
Original file line number Diff line number Diff line change
@@ -1,25 +1,47 @@
{
"name": "visualcave",
"description": "Generate interactive technical diagrams as standalone HTML files. Powered by Mermaid.js. Supports flowcharts, sequence diagrams, ER diagrams, class diagrams, state machines, timelines, mind maps, git graphs, pie charts, and quadrant charts. Dark mode, step-through reveal, and export built in.",
"version": "1.0.0",
"description": "Design and render interactive technical diagrams as standalone HTML files or embeddable Astro/MDX components. Supports 11 Mermaid diagram types with dark mode, step-through reveal, hover highlighting, and one-click SVG/PNG/PDF export.",
"author": {
"name": "varkart",
"url": "https://github.com/varkart"
},
"homepage": "https://varkart.github.io/visualcave",
"repository": "https://github.com/varkart/visualcave",
"license": "MIT",
"keywords": [
"diagram",
"mermaid",
"infographic",
"flowchart",
"architecture",
"technical-diagram",
"visualization"
"visualization",
"svg",
"infographic",
"sequence-diagram",
"er-diagram",
"class-diagram",
"state-machine",
"interactive",
"dark-mode",
"export"
],
"skills": ["./"],
"skills": "./",
"interface": {
"capabilities": ["diagram-generation", "visualization", "technical-illustration"],
"brandColor": "#1E88E5",
"displayName": "VisualCave",
"shortDescription": "Interactive diagram generator for AI agents",
"longDescription": "Use VisualCave to design and render interactive technical diagrams as standalone HTML files. Supports flowcharts, sequence diagrams, ER diagrams, class diagrams, state machines, timelines, mind maps, git graphs, pie charts, and quadrant charts — all with dark mode, four theme presets, step-through reveal, hover highlighting, and one-click SVG/PNG/PDF export. Zero runtime dependencies.",
"developerName": "varkart",
"category": "Developer Tools",
"capabilities": ["Interactive", "Write"],
"websiteURL": "https://varkart.github.io/visualcave",
"privacyPolicyURL": "https://github.com/varkart/visualcave/blob/main/SECURITY.md",
"termsOfServiceURL": "https://github.com/varkart/visualcave/blob/main/LICENSE",
"defaultPrompt": [
"Create a diagram showing how OAuth 2.0 works",
"Draw a transformer architecture with step-through guide",
"Make an order lifecycle state machine",
"Visualize a microservices architecture"
]
"Visualize a RAG pipeline from ingestion to grounded response",
"Make an order lifecycle state machine with all edge cases"
],
"brandColor": "#1E88E5"
}
}
11 changes: 11 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,17 @@ jobs:
- name: npm audit (high + critical only)
run: npm audit --audit-level=high --legacy-peer-deps

secret-scan:
name: Secret scan
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- uses: gitleaks/gitleaks-action@v2
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

validate:
name: Playwright — validate all examples render
runs-on: ubuntu-latest
Expand Down
31 changes: 31 additions & 0 deletions .kiro/steering/visualcave.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
# VisualCave

Trigger: use when the user asks to create a diagram, chart, infographic, flowchart, architecture illustration, or any technical visualization. Covers flowcharts, sequence diagrams, ER diagrams, class diagrams, state machines, timelines, mind maps, git graphs, pie charts, and quadrant charts.

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

**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 for the diagram type.

## Diagram Type Quick Reference

| User says… | Use |
| ---------------------------------- | ----------------------- |
| flow, pipeline, architecture | `graph TD` / `graph LR` |
| sequence, API calls, who calls who | `sequenceDiagram` |
| class, OOP, domain model | `classDiagram` |
| state, lifecycle, FSM | `stateDiagram-v2` |
| database, schema, ER | `erDiagram` |
| priority matrix, 2×2 | `quadrantChart` |
| timeline, history, milestones | `timeline` |
| mind map, brainstorm | `mindmap` |
| git branching, gitflow | `gitGraph` |
| pie chart, distribution | `pie` |

## HTML Template

See full template and color reference at: https://github.com/varkart/visualcave/blob/main/SKILL.md
43 changes: 43 additions & 0 deletions POWER.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
---
name: visualcave
description: Generate interactive Mermaid diagrams as self-contained HTML files with dark mode, step-through reveal, hover highlighting, and one-click SVG/PNG/PDF export
keywords:
- diagram
- flowchart
- mermaid
- architecture diagram
- sequence diagram
- ER diagram
- class diagram
- state machine
- timeline
- mind map
- git graph
- infographic
- visualization
- chart
- technical illustration
---

# VisualCave

Output a **single self-contained `.html` file**. No markdown wrapper unless asked.

Invoke with `/visualcave` or when the user asks to create a diagram, chart, flowchart, architecture illustration, or any technical visualization.

Full instructions and HTML template: see `SKILL.md` in this directory, or at https://github.com/varkart/visualcave/blob/main/SKILL.md

## Diagram Type Quick Reference

| User says… | Mermaid keyword |
| ---------------------------------- | ----------------------- |
| flow, pipeline, architecture | `graph TD` / `graph LR` |
| sequence, API calls, actors | `sequenceDiagram` |
| class, OOP, domain model | `classDiagram` |
| state, lifecycle, FSM | `stateDiagram-v2` |
| database, schema, ER | `erDiagram` |
| priority matrix, 2×2 | `quadrantChart` |
| timeline, history, milestones | `timeline` |
| mind map, brainstorm | `mindmap` |
| git branching, gitflow | `gitGraph` |
| pie chart, distribution | `pie` |
58 changes: 54 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,63 @@ git clone https://github.com/varkart/visualcave ~/.claude/skills/visualcave
git clone https://github.com/varkart/visualcave .claude/skills/visualcave
```

**Cursor**copy `.cursor/rules/visualcave.mdc` into your project's `.cursor/rules/` directory.
**Cursor — global skill**

**Codex CLI** — install via `.codex-plugin/plugin.json` or clone and reference the skill directory.
```bash
git clone https://github.com/varkart/visualcave ~/.cursor/skills-cursor/visualcave
```

**Cursor — project rules only**

Copy `.cursor/rules/visualcave.mdc` into your project's `.cursor/rules/` directory.

**Codex CLI — skill (git)**

```bash
git clone https://github.com/varkart/visualcave ~/.codex/skills/visualcave
```

**Codex CLI — plugin (marketplace)**

```bash
codex plugin marketplace add varkart/visualcave
codex plugin add visualcave
```

**Gemini CLI — extension (git)**

```bash
git clone https://github.com/varkart/visualcave ~/.gemini/extensions/visualcave
```

**Gemini CLI — extension (install command)**

```bash
gemini extensions install https://github.com/varkart/visualcave
```

**Google Antigravity CLI (`agy`) — skill (git)**

```bash
git clone https://github.com/varkart/visualcave ~/.gemini/antigravity-cli/skills/visualcave
```

**Google Antigravity CLI (`agy`) — plugin (git)**

```bash
git clone https://github.com/varkart/visualcave ~/.gemini/antigravity-cli/plugins/visualcave
agy plugin install ~/.gemini/antigravity-cli/plugins/visualcave
```

**Kiro — skill (git)**

```bash
git clone https://github.com/varkart/visualcave ~/.kiro/skills/visualcave
```

**Gemini CLI** — clone the repo; Gemini CLI will pick up `gemini-extension.json` automatically and load `SKILL.md` as context.
**Kiro — Power**

**Kiro** — copy `.kiro/skills/visualcave.md` into your project's `.kiro/skills/` directory. (See [issue #7](https://github.com/varkart/visualcave/issues/7) — in progress)
Add as a Power in Kiro settings using the GitHub URL `https://github.com/varkart/visualcave`. For project-level steering, copy `.kiro/steering/visualcave.md` into your project's `.kiro/steering/` directory.

No restart required after installation.

Expand Down
2 changes: 1 addition & 1 deletion SECURITY.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

Found a security issue? **Do not open a public GitHub issue.**

Email: https://github.com/varkart/visualcave/issues/new
Open a confidential issue: https://github.com/varkart/visualcave/issues/new

Include:

Expand Down
4 changes: 4 additions & 0 deletions agents/openai.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
interface:
display_name: "VisualCave"
short_description: "Interactive diagram generator — flowcharts, sequence, ER, class, state machines, mind maps"
default_prompt: "Use $visualcave to design and render an interactive technical diagram as a standalone HTML file with dark mode, step-through reveal, and one-click export."
12 changes: 12 additions & 0 deletions plugin.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"name": "visualcave",
"version": "1.0.0",
"description": "Design and render interactive technical diagrams as standalone HTML files or embeddable Astro/MDX components. Supports 11 Mermaid diagram types with dark mode, step-through reveal, hover highlighting, and one-click SVG/PNG/PDF export.",
"author": {
"name": "varkart",
"url": "https://github.com/varkart"
},
"license": "MIT",
"homepage": "https://varkart.github.io/visualcave",
"repository": "https://github.com/varkart/visualcave"
}
Loading
Loading