# Gemini Image Generation Prompt for autorun

Copy the prompt below into Gemini and ask it to generate an image.

---

Create a clean, professional flowchart diagram for the "autorun" project — a Claude Code plugin that enables autonomous AI task execution with built-in safety guards.

The diagram should show the user's journey from intent to outcome:

1. USER INTENT: Developer has a task (bug fix, feature, refactor)
2. COMMAND: Types "/ar:go <task>" in Claude Code CLI
3. SAFETY LAYER: AutoFile policy controls what files AI can create/modify
   - allow-all: full freedom
   - justify-create: requires reasoning
   - find-only: modify existing files only
4. THREE-STAGE EXECUTION:
   - Stage 1: AI implements the task
   - Stage 2: AI critically evaluates its own work, finds gaps, fixes issues
   - Stage 3: AI verifies all requirements met
5. SAFETY GUARDS: Dangerous commands blocked (rm → trash, git reset --hard → git stash)
6. OUTCOME: Verified, complete work with all three stages confirmed

Style requirements:
- Left-to-right flow showing progression from intent to outcome
- Color-coded stages (blue for user actions, green for safe execution, red for blocked actions)
- Icons or visual indicators for safety checkpoints
- Clean, minimal design suitable as a README hero image
- Show the key value proposition: "autonomous execution that self-verifies"

#!/usr/bin/env bun
/**
 * render-mermaid — Render Mermaid .mmd files to themed SVG.
 *
 * Usage:
 *   bun run render-mermaid.ts <input.mmd...> [-o output.svg] [-d outdir] [-t theme]
 *   bun run render-mermaid.ts --list-themes
 *   echo 'graph TD; A-->B' | bun run render-mermaid.ts -o diagram.svg
 *
 * Dependencies (beautiful-mermaid) are auto-installed by bun on first run.
 */
import { renderMermaidSVGAsync, THEMES } from 'beautiful-mermaid'
import { writeFileSync, readFileSync, mkdirSync, existsSync } from 'fs'
import { resolve, basename, dirname, extname } from 'path'

const HELP = `render-mermaid — Render Mermaid .mmd files to themed SVG

Usage:
  bun run render-mermaid.ts [options] <input.mmd...>
  echo 'graph TD; A-->B' | bun run render-mermaid.ts -o out.svg

Options:
  -o, --output <file>   Output file (single input only)
  --outdir <dir>        Output directory for multiple files
  -t, --theme <name>    Theme (default: tokyo-night)
  --list-themes         List available themes
  --help                Show this help

Note: -d and -h are intercepted by "bun run". Use --outdir and --help instead.

Output defaults:
  Single file without -o: writes <name>.svg next to the input
  Multiple files: writes .svg next to each input
  With --outdir: writes all .svg files into that directory

Examples:
  bun run render-mermaid.ts diagram.mmd
  bun run render-mermaid.ts diagram.mmd -o pretty.svg
  bun run render-mermaid.ts *.mmd --outdir docs/diagrams
  bun run render-mermaid.ts -t dracula diagram.mmd`

// --- Arg parsing ---
const args = process.argv.slice(2)
let themeName = 'tokyo-night'
let outDir: string | null = null
let outputFile: string | null = null
const inputFiles: string[] = []

for (let i = 0; i < args.length; i++) {
  const a = args[i]
  const next = () => {
    if (i + 1 >= args.length) {
      console.error(`Error: ${a} requires a value`)
      process.exit(1)
    }
    return args[++i]
  }

  switch (a) {
    case '-t': case '--theme':  themeName = next(); break
    case '--outdir': outDir = next(); break
    case '-o': case '--output': outputFile = next(); break
    case '--list-themes':
      console.log(Object.keys(THEMES).join('\n'))
      process.exit(0)
    case '--help':
      console.log(HELP)
      process.exit(0)
    default:
      if (a.startsWith('-')) {
        console.error(`Error: Unknown option "${a}". Use --help for usage.`)
        process.exit(1)
      }
      inputFiles.push(a)
  }
}

// --- Validate ---
if (outputFile && outDir) {
  console.error('Error: Cannot use both -o and -d together.')
  process.exit(1)
}
if (outputFile && inputFiles.length > 1) {
  console.error('Error: -o can only be used with a single input file.')
  process.exit(1)
}

const theme = THEMES[themeName]
if (!theme) {
  console.error(`Error: Unknown theme "${themeName}". Use --list-themes.`)
  process.exit(1)
}

// --- Counters ---
let ok = 0, failed = 0

// --- Collect render jobs: [{name, source, dest}] ---
type Job = { name: string; source: string; dest: string }
const jobs: Job[] = []

if (inputFiles.length === 0) {
  // Read from stdin
  if (process.stdin.isTTY) {
    console.error('Error: No input files specified. Use --help for usage.')
    process.exit(1)
  }
  const stdinData = await new Promise<string>((res) => {
    let d = ''
    process.stdin.on('data', (c: Buffer) => { d += c.toString() })
    process.stdin.on('end', () => res(d))
  })
  if (!stdinData.trim()) {
    console.error('Error: No input files and stdin is empty. Use --help.')
    process.exit(1)
  }
  if (!outputFile) {
    console.error('Error: Reading from stdin requires -o <output.svg>.')
    process.exit(1)
  }
  jobs.push({ name: 'stdin', source: stdinData, dest: outputFile })
} else {
  for (const inputPath of inputFiles) {
    const ext = extname(inputPath).toLowerCase()
    const name = basename(inputPath, ext)

    // Catch common mistakes: passing .svg (output) or non-mermaid files as input
    if (ext === '.svg') {
      console.error(`  SKIP  ${inputPath}: this is an SVG (output), not a .mmd source. Did you mean the .mmd file?`)
      failed++
      continue
    }
    if (ext && ext !== '.mmd' && ext !== '.mermaid') {
      console.error(`  WARN  ${inputPath}: unexpected extension "${ext}" (expected .mmd or .mermaid)`)
    }

    if (!existsSync(inputPath)) {
      console.error(`  FAIL  ${name}: file not found: ${inputPath}`)
      failed++
      continue
    }
    const source = readFileSync(inputPath, 'utf-8')
    let dest: string
    if (outputFile) {
      dest = outputFile
    } else if (outDir) {
      dest = resolve(outDir, `${name}.svg`)
    } else {
      dest = resolve(dirname(inputPath), `${name}.svg`)
    }
    // Prevent overwriting input with output
    if (resolve(inputPath) === resolve(dest)) {
      console.error(`  FAIL  ${name}: output would overwrite input file. Use -o or -d.`)
      failed++
      continue
    }
    jobs.push({ name, source, dest })
  }
}

if (jobs.length === 0) {
  console.error('Error: No valid input files found.')
  process.exit(1)
}

if (outDir) mkdirSync(outDir, { recursive: true })

// --- Render ---
for (const { name, source, dest } of jobs) {
  try {
    // Strip %%{init:...}%% front matter — beautiful-mermaid handles theming
    const cleaned = source.replace(/^%%\{init:.*?\}%%\n?/s, '')
    const svg = await renderMermaidSVGAsync(cleaned, theme)
    mkdirSync(dirname(dest), { recursive: true })
    writeFileSync(dest, svg)
    console.log(`  ok  ${dest}`)
    ok++
  } catch (e: any) {
    console.error(`  FAIL  ${name}: ${e.message?.split('\n')[0]}`)
    failed++
  }
}

if (ok + failed > 1 || failed > 0) {
  console.log(`\n${ok} rendered, ${failed} failed`)
}
if (failed > 0) process.exit(1)

---
name: mermaid-diagrams
description: Render Mermaid diagrams to SVG using beautiful-mermaid and bun. Use when the user asks to "render mermaid", "generate diagram", "create flowchart", "update diagrams", "render SVG from mermaid", "beautiful-mermaid", "regenerate diagrams", or needs to convert Mermaid diagram syntax into styled SVG files. Supports all Mermaid diagram types with 15 themes including tokyo-night.
---

# Mermaid Diagram Rendering with beautiful-mermaid

<purpose>

Render Mermaid `.mmd` files into styled SVG using [beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) v1.0.2 and [bun](https://bun.sh).

## Skill Contents

| File | Purpose |
|------|---------|
| `render-mermaid.ts` | CLI tool: renders `.mmd` files to SVG |
| `gemini-diagram-prompt.md` | Prompt for Gemini image generation |

</purpose>

<setup>

## Installation

Only **bun** is required. The `beautiful-mermaid` dependency is auto-installed by bun on first run.

```bash
# macOS
brew install oven-sh/bun/bun

# Or universal installer
curl -fsSL https://bun.sh/install | bash
```

</setup>

<reference>

## CLI Reference

```
render-mermaid — Render Mermaid .mmd files to themed SVG

Usage:
  bun run render-mermaid.ts [options] <input.mmd...>
  echo 'graph TD; A-->B' | bun run render-mermaid.ts -o out.svg

Options:
  -o, --output <file>   Output file (single input only)
  --outdir <dir>        Output directory for multiple files
  -t, --theme <name>    Theme (default: tokyo-night)
  --list-themes         List available themes
  --help                Show this help
```

**Output defaults:** Without `-o` or `--outdir`, writes `<name>.svg` next to each input file (`-d` is swallowed by `bun run`; use `--outdir`).

**Shorthand:** Set `MERMAID=plugins/autorun/skills/mermaid-diagrams/render-mermaid.ts` for shorter commands.

</reference>

<examples>

## Examples

```bash
MERMAID=plugins/autorun/skills/mermaid-diagrams/render-mermaid.ts

# Render single file (output next to input)
bun run $MERMAID diagram.mmd

# Render to specific output
bun run $MERMAID diagram.mmd -o pretty.svg

# Render all .mmd files to output directory
bun run $MERMAID docs/diagrams/*.mmd --outdir docs/diagrams

# Different theme
bun run $MERMAID -t dracula diagram.mmd

# Pipe from stdin
echo 'graph TD; A-->B-->C' | bun run $MERMAID -o quick.svg

# List themes
bun run $MERMAID --list-themes
```

## Project Diagrams

Mermaid source files (`.mmd`) and rendered output (`.svg`) in `docs/diagrams/`, plus one source at the repository root:

| Source | Description |
|--------|-------------|
| `docs/diagrams/autofile-policy.mmd` | AutoFile policy flowchart |
| `docs/diagrams/three-stage-autorun.mmd` | Three-stage autorun flowchart |
| `autorun-architecture.mmd` | Full architecture (too complex for beautiful-mermaid) |

Regenerate:

```bash
bun run $MERMAID docs/diagrams/*.mmd --outdir docs/diagrams
```

</examples>

<limitations>

## Known Limitations

- Complex diagrams with deeply nested subgraphs may hit dagre layout bugs. Failed diagrams are reported but don't block other renders.
- `%%{init:...}%%` front matter is stripped automatically (beautiful-mermaid applies its own theming).

</limitations>

<image_generation>

## Gemini Image Generation

`gemini-diagram-prompt.md` contains a prompt for Gemini to generate an outcome-focused project overview image. Copy the prompt into a Gemini conversation.

</image_generation>