flow-visual-explainer（流程视觉解释器） Skills下载安装命令和教程

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：flow-visual-explainer（流程视觉解释器）
来源仓库：https://github.com/windseeker1111/flow-visual-explainer
安装命令：
openclaw skills install flow-visual-explainer
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 OpenClaw 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

ClawHubOpenClaw

openclaw skills install flow-visual-explainer

简介

flow-visual-explainer 生成独立 HTML 页面直观解释系统、代码或数据。

适合提供架构图、流程图或数据可视化图表辅助理解。
通过 clawhub 安装后，输入文本描述即可输出交互式 HTML 演示。
输出结果为静态页面，需手动预览检查布局与响应式表现。
适用宿主包括 OpenClaw，接入前应确认版本、权限和运行环境要求。

SKILL.md

name: FlowVisualExplainer
description: Generate beautiful, self-contained HTML pages that visually explain systems, code, plans, and data. Use when the user asks for a diagram, architecture overview, diff review, plan review, project recap, comparison table, slide deck, or any visual explanation of technical concepts. Also triggers automatically when about to render a complex table (4+ rows or 3+ columns) — render HTML instead of ASCII. Supports --slides flag for magazine-quality slide decks. Outputs to ~/clawd/output/diagrams/ and opens in browser.
homepage: https://github.com/nicobailon/visual-explainer
metadata
openclaw
emoji: 🎨
version: 1.0.0
author: nicobailon (adapted for OpenClaw by Flo)

Flow Visual Explainer

Generate self-contained HTML files for technical diagrams, visualizations, and data tables. Always open the result in the browser. Never fall back to ASCII art when this skill is loaded.

Output directory: ~/clawd/output/diagrams/ Open in browser: exec: open ~/clawd/output/diagrams/filename.html

Trigger Conditions

Use this skill when:

User asks to "draw", "diagram", "visualize", "chart", "map out", or "explain" something visually
User asks for architecture overview, system diagram, flow diagram, sequence diagram, ER diagram
User asks for a diff review, plan review, project recap, or fact-check
User asks for a slide deck or presentation
You are about to render a table with 4+ rows or 3+ columns — render HTML instead automatically
User asks to compare N things against M criteria (always a table → always HTML)

Do not wait for the user to ask for HTML. If the output would be a complex table or diagram, render it visually.

Commands (Natural Language Triggers)

What user says	What to generate
"draw a diagram of X" / "visualize X"	`generate-web-diagram` — HTML diagram for any topic
"visual plan for X" / "implementation plan"	`generate-visual-plan` — visual feature/build plan
"slide deck for X" / "slides on X"	`generate-slides` — magazine-quality slide deck
"review this diff" / "/diff-review"	`diff-review` — visual diff with architecture comparison
"review this plan" / "/plan-review"	`plan-review` — plan vs codebase with risk assessment
"project recap" / "catch me up on X"	`project-recap` — mental model snapshot for context switching
"fact-check this doc"	`fact-check` — verify document accuracy against actual code
"share this" / "deploy this"	`share` — deploy HTML to Vercel, return live URL

Any command that produces a scrollable page also supports --slides flag:

"review this diff as slides"
→ generates slide deck version instead of scrollable page

Workflow

Step 1: Think First (30 seconds)

Before writing HTML, commit to a direction. Answer three questions:

Who is looking? Developer? PM? Investor? Shapes density and complexity.

What type of content?

Architecture (text-heavy cards) → CSS Grid
Architecture (topology, connections matter) → Mermaid
Flowchart / pipeline / state machine → Mermaid
Sequence diagram → Mermaid
ER / schema → Mermaid
Data table / comparison / matrix → HTML <table>
Dashboard / metrics → Chart.js
Slide deck → scroll-snap sections

What aesthetic? Pick one. Commit. Read references/css-patterns.md for patterns.

Constrained aesthetics (prefer these — harder to make generic):

Blueprint: technical drawing, dot/grid background, slate/blue palette, monospace labels
Editorial: serif headlines (Instrument Serif, Crimson Pro), generous whitespace, muted earth tones or navy + gold
Paper/ink: warm cream #faf7f5 background, terracotta/sage accents, informal
Monochrome terminal: green/amber on near-black, monospace, CRT glow optional

Flexible aesthetics (use with discipline):

IDE-inspired: commit to a real named scheme (Dracula, Nord, Catppuccin Mocha, Gruvbox, One Dark) — use the actual palette
Data-dense: small type, tight spacing, maximum info, muted colors

Forbidden forever:

Neon dashboard (cyan + magenta + purple on dark) — AI slop
Gradient mesh (pink/purple/cyan blobs) — too generic
Inter font + violet/indigo accents + gradient text combination

Vary each time. If the last diagram was dark and technical, make the next one light and editorial.

Step 2: Read Reference Material

Before generating, read the relevant references:

For architecture (text-heavy cards): read references/css-patterns.md + templates/architecture.html For flowcharts / diagrams: read references/libraries.md + templates/mermaid-flowchart.html For data tables / comparisons: read templates/data-table.html For slide decks: read templates/slide-deck.html + references/slide-patterns.md For CSS/layout patterns: read references/css-patterns.md For 4+ sections (reviews, recaps, dashboards): also read references/responsive-nav.md

Step 3: Choose Rendering Approach

Content type	Approach
Architecture (text-heavy)	CSS Grid cards + flow arrows
Architecture (topology)	Mermaid graph
Flowchart / pipeline	Mermaid flowchart
Sequence diagram	Mermaid sequence
Data flow	Mermaid with edge labels
ER / schema	Mermaid ER
State machine	Mermaid stateDiagram
Mind map	Mermaid mindmap
Class diagram	Mermaid classDiagram
C4 architecture	Mermaid graph TD with subgraphs
Data table / comparison	HTML `<table>` with styled CSS
Dashboard / KPIs	CSS Grid cards + Chart.js
Slide deck	Scroll-snap `<section>` elements

Step 4: Generate HTML

File naming: ~/clawd/output/diagrams/YYYY-MM-DD-{slug}.html Example: ~/clawd/output/diagrams/2026-03-10-nexus-architecture.html

All HTML must be:

Self-contained (no external dependencies except CDN libs)
Single file
Dark/light theme support via @media (prefers-color-scheme: dark)
Responsive (mobile-friendly)
Real typography — Google Fonts or system font stack, never just sans-serif

Boilerplate structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{Title}</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
  <style>
    /* CSS custom properties for theme */
    /* Layout */
    /* Components */
  </style>
</head>
<body>
  <!-- Content -->
  <script>
    /* JS only if needed (Mermaid, Chart.js, interactivity) */
  </script>
</body>
</html>

Step 5: Open in Browser

After writing the file:

open ~/clawd/output/diagrams/YYYY-MM-DD-{slug}.html

Tell the user the file path and that it's opened in their browser.

Diagram-Specific Notes

Mermaid Integration

Always use theme: 'base' — only theme where all themeVariables are customizable
Never use violet/indigo/fuchsia colors in themeVariables
Always add CSS overrides for .mermaid .nodeLabel and .mermaid .edgeLabel to respect page color scheme
Never use .node as a CSS class (conflicts with Mermaid internals) — use .ve-card instead
Add zoom/pan controls for complex diagrams (see css-patterns.md)
Import ELK layout engine only when needed — adds significant bundle weight

Slide Decks

Use scroll-snap: each slide is 100dvh, scroll-snap-align: start
Add keyboard navigation (ArrowLeft/ArrowRight/Space)
Add slide counter (e.g., "3 / 12")
Add progress bar
Inventory ALL source content before assigning to slides — never silently drop content
A source doc with 7 sections typically → 18–25 slides, not 10–13

Data Tables

Sticky header
Alternating row colors
Sortable columns if >8 rows (add click handlers)
Status badges for status columns (color-coded)
Export to CSV button for data tables

Share to Web

To deploy any generated HTML page to a live URL:

~/clawd/skills/flow-visual-explainer/scripts/share.sh ~/clawd/output/diagrams/filename.html

Requires Vercel CLI: npm i -g vercel. Returns a live URL that can be shared.

Flowverse Design System

When generating diagrams for FlowStay / FlowVue / FlowTron / any Flowverse product, use the official brand palette:

:root {
  --flow-hero: #008FFF;
  --flow-hero-light: #33A5FF;
  --flow-hero-dark: #0070CC;
  --flow-glow: rgba(0, 143, 255, 0.25);
  --flow-bg: #0a0a0f;        /* FlowVue dark bg */
  --flow-surface: #13131a;
  --flow-border: rgba(255,255,255,0.08);
  --flow-text: #e8e8f0;
}

FlowVue is dark-only. FlowStay and FlowTron support both themes.

Examples

"Draw me a diagram of the API gateway architecture" → Mermaid architecture diagram, Blueprint aesthetic, shows Client → Gateway → Auth → Services → Database

"Give me a project recap on the checkout refactor" → Scrollable HTML page, sections: Status, Recent Commits, Active Work, Blockers, Next Steps

"Slide deck on our Q2 go-to-market plan" → 15–20 slide deck, editorial aesthetic, covers ICP, target pipeline, GTM channels, urgency argument

"Review the Phase 9 routing diff" → Visual diff review: before/after architecture, code quality assessment, risk flags

*Adapted from nicobailon/visual-explainer (MIT) for OpenClaw — March 2026*

适合场景

01

OpenClaw 用户查找和安装 Skill 时

02

用户想查找某类 Agent Skill 时

03

需要根据任务场景推荐可安装能力包时

04

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

补充不同宿主或平台的使用分布数据

能力 5

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

OpenClaw

73.43%

按下载量换算2,373

安全审计

VirusTotal

通过

ClawScan

通过

Static analysis

通过

权限和风险

操作浏览器

该 Skill 可能涉及浏览器控制能力，使用时可能读取或操作网页内容，需要在受控环境中确认权限边界。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/windseeker1111/flow-visual-explainer

SKILL.md 来源

clawhub.ai

/windseeker1111/flow-visual-explainer

继续浏览同类 Skills

更多效率 Skills（21,003）返回 Skills 目录

上一个 Skill

flow-state-monitoring（流态监测）

flow-state-monitoring 用于补充效率相关能力，适合在 OpenClaw 中需要让 Agent 承接效率相关任务时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。

下一个 Skill

flowchart-exam-generator（流程图考试生成器）

flowchart-exam-generator 用于补充效率相关能力，适合在 OpenClaw 中需要让 Agent 承接效率相关任务时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。