本文へ移動
cccskills
無料GitHub で公開

mermaid

Render Mermaid diagrams as SVG or ASCII art using beautiful-mermaid. Use when users need to create flowcharts, sequence diagrams, state diagrams, class diagrams, or ER diagrams. Supports both graphical SVG output and terminal-friendly ASCII/Unicode output.

インストール方法を見る

含まれるファイル(3)

  • SKILL.md2.9 KB
  • references/syntax.md1.3 KB
  • scripts/render.ts4.3 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

⚠️ Platform note — read before running any command. The shell snippets in this skill are written for macOS / Linux (bash/zsh). Always check which OS you are on first. On Windows do not run them verbatim — the underlying tool/CLI commands are usually cross-platform, but the surrounding shell syntax is not. Translate it to PowerShell before running:

bash (macOS / Linux)PowerShell (Windows)
a && brun as two steps, or a; if ($?) { b }
cat <<'EOF' | tool … (heredoc)write the text to a temp file, then pipe/pass that file to the tool
VAR=$(cmd) … $VAR$VAR = cmd … $VAR
cmd > /dev/nullcmd > $null
… | grep PAT… | Select-String PAT
… | jq …… | ConvertFrom-Json, then read the fields
python3 x.pypython x.py (or py x.py)
~/dir, /tmp$env:USERPROFILE\dir, $env:TEMP
cp / mkdir -p / rm -rfCopy-Item / New-Item -ItemType Directory -Force / Remove-Item -Recurse -Force

If a command has no obvious Windows equivalent, prefer the built-in file/HTTP tools over raw shell.

Mermaid Diagram Renderer

Render Mermaid diagrams using beautiful-mermaid library. Supports 5 diagram types with dual output modes.

Quick Start

Dependencies (beautiful-mermaid) auto-install on first run.

SVG Output (Default)

# From file
npx tsx scripts/render.ts diagram.mmd --output diagram.svg

# From stdin
echo "graph LR; A-->B-->C" | npx tsx scripts/render.ts --stdin --output flow.svg

ASCII Output (Terminal)

# ASCII art for terminal display
npx tsx scripts/render.ts diagram.mmd --ascii

# Pipe directly
echo "graph TD; Start-->End" | npx tsx scripts/render.ts --stdin --ascii

Output example:

┌───────┐     ┌─────┐
│ Start │────▶│ End │
└───────┘     └─────┘

Supported Diagrams

TypeSyntaxBest For
Flowchartgraph TD/LRProcesses, decisions
SequencesequenceDiagramAPI calls, interactions
StatestateDiagram-v2State machines
ClassclassDiagramOOP design
ERerDiagramDatabase schemas

Theming (SVG only)

npx tsx scripts/render.ts diagram.mmd --theme github-dark --output out.svg

Use invalid theme name to see available themes list (e.g., --theme ?)

Resources

  • scripts/render.ts - Main rendering script
  • references/syntax.md - Mermaid syntax quick reference

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Configure AionUi itself with the bundled aioncore CLI. Use when asked to set up or change assistants, assistant rules, skills, MCP servers, model providers, agents, scheduled tasks, or settings.

日本語の概要は準備中です。原文の説明を表示しています。

iOfficeAI/AionCore1222026年10月15日 更新

Diagnose a running AionUi installation: inspect stuck or errored conversations, read provider health, scheduled task state, MCP server health, team member state, backend health, and aioncore logs. Use when the user reports AionUi is misbehaving, a conversation is stuck, an LLM/provider call is failing, a scheduled task did not run, an MCP server has no tools, a team member is hung, or they ask to troubleshoot AionUi.

日本語の概要は準備中です。原文の説明を表示しています。

iOfficeAI/AionCore1222026年10月15日 更新

Expose the user's local AionUi WebUI to the public internet with a near-zero-effort flow. Detects whether the WebUI is running, guides the user to switch it on if needed (the only manual step), self-installs cloudflared cross-platform, opens a Cloudflare quick tunnel, verifies the public URL actually works, then explains the limitations honestly (temporary/random URL, must stay running, password is the only protection, traffic transits Cloudflare). Use whenever the user wants to reach their AionUi from outside the LAN, over the internet, or share a public link. Distinct from aionui-webui-setup (which covers manual LAN / Tailscale / server config through the settings UI): this skill produces a one-click public link via an automatic tunnel.

日本語の概要は準備中です。原文の説明を表示しています。

iOfficeAI/AionCore1222026年10月15日 更新

AionUi WebUI configuration expert: Helps users configure AionUi WebUI mode for remote access through the settings interface. Supports LAN connection, Tailscale VPN, and server deployment. Use when users need to set up AionUi WebUI, configure remote access, troubleshoot WebUI issues, or deploy AionUi on servers.

日本語の概要は準備中です。原文の説明を表示しています。

iOfficeAI/AionCore1222026年10月15日 更新

Create a new conversation for this user with the bundled aioncore CLI. Use when the user asks to open, start, or spin up a new conversation.

日本語の概要は準備中です。原文の説明を表示しています。

iOfficeAI/AionCore1222026年10月15日 更新

cron

無料

Scheduled task management - create, query, update scheduled tasks to automatically execute operations at specified times.

日本語の概要は準備中です。原文の説明を表示しています。

iOfficeAI/AionCore1222026年10月15日 更新

iOfficeAI のスキルをすべて見る

このスキルの問題を報告する