跳到正文
cccskills
免费在 GitHub 公开

visualize

Generate Mermaid diagrams from code, architecture, or concepts. Use when you need to visualize code flow, system architecture, data relationships, state machines, sequences, class structures, or any other diagrammable concept.

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(1)

  • SKILL.md1.9 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Visualize - Generate Mermaid Diagram

Analyze input and generate clear, well-structured Mermaid diagrams.

Workflow

  1. Analyze input - Understand what to visualize (code flow, architecture, data relationships, state machines, sequences, etc.)

  2. Choose diagram type:

    • flowchart - Process flows, decision trees, algorithms
    • sequenceDiagram - API calls, message passing, request/response
    • classDiagram - Class structures, inheritance, interfaces
    • erDiagram - Database schemas, entity relationships
    • stateDiagram-v2 - State machines, lifecycle flows
    • graph TD/LR - Dependency graphs, module relationships
    • gitgraph - Git branching strategies
    • journey - User journeys
    • gantt - Timelines and schedules
  3. Generate diagram with:

    • Clear, descriptive node labels
    • Logical grouping with subgraphs where appropriate
    • Consistent styling and direction
    • Meaningful relationship labels on edges
    • Manageable complexity (split if needed)
  4. Output in mermaid code block:

    ```mermaid
    [diagram code]
    ```
    

Style Guidelines

  • Use descriptive IDs: userService not a1
  • Add labels to relationships when they add clarity
  • Use subgraphs to group related components
  • Keep readable: max ~15-20 nodes per diagram
  • Arrow styles:
    • --> solid (main flow)
    • -.-> dotted (optional/async)
    • ==> thick (important path)
    • o--> circle end (aggregation)
    • *--> diamond end (composition)

After Generating

  • Explain what the diagram shows
  • Offer to refine or expand specific sections
  • Suggest alternative diagram types if applicable

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Add an iOS App Clip target to an Expo app. Use when the user mentions App Clip, AASA, apple-app-site-association, appclips, smart app banner, or wants to ship a lightweight iOS Clip invoked from a URL alongside their parent app.

中文简介正在准备中。当前显示原文说明。

heyAyushh/stacc32026年9月21日 更新

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.

中文简介正在准备中。当前显示原文说明。

heyAyushh/stacc32026年9月21日 更新

Add Agentation visual feedback toolbar to a Next.js project

中文简介正在准备中。当前显示原文说明。

heyAyushh/stacc32026年9月21日 更新

Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.

中文简介正在准备中。当前显示原文说明。

heyAyushh/stacc32026年9月21日 更新

Derive and implement first-principles audio-coupled haptic and kinetic UI feedback. Use when designing, reviewing, or coding haptics/audio for mobile apps, native iOS/Android, React Native/Expo, SwiftUI, games, detent pickers, toggles, sliders, page curls, scroll gestures, wallet/signature flows, Solana transactions, backend/realtime state changes, confirmations, settlements, and semantic UI events where feedback should follow signal math instead of ad hoc vibration calls.

中文简介正在准备中。当前显示原文说明。

heyAyushh/stacc32026年9月21日 更新

Babysit a GitHub pull request during a user-approved monitoring window by polling review comments, CI checks/workflow runs, and mergeability state. Diagnose failures, retry likely flaky failures up to 3 times, auto-fix/push branch-related issues when appropriate, and report fresh review feedback. Use when the user asks Codex to monitor a PR, watch CI, handle review comments, or keep an eye on failures and feedback on an open PR.

中文简介正在准备中。当前显示原文说明。

heyAyushh/stacc32026年9月21日 更新

查看 heyAyushh 的全部技能

报告此技能的问题