跳到正文
cccskills
免费在 GitHub 公开

diagram-maker

Turn concepts, processes, and system architecture into diagrams. Create a self-contained HTML file with SVG graphics for browser viewing, or an editable Excalidraw file for whiteboard sketches and flowcharts.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

Create standalone SVG/HTML or editable Excalidraw diagrams for concepts, architecture, processes, flows, and whiteboards.

查看安装方法

适用场景

  • Illustrating concepts and processes for teaching
  • Mapping software and cloud architecture
  • Creating editable whiteboard sketches
  • Visualizing workflows as flowcharts

包含的文件(5)

  • SKILL.md2.5 KB
  • LICENSE.txt1.1 KB
  • NOTICE.md831 B
  • references/excalidraw-patterns.md1.4 KB
  • references/svg-template.md1.9 KB

SKILL.md(原文)

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

Diagram Maker

Create diagrams as artifacts, not prose. Choose one output mode:

  • clean-svg: educational concepts, physical systems, processes, lifecycle, simple data flow.
  • architecture-svg: software/cloud/infra topology, services, databases, queues, trust zones.
  • excalidraw: editable hand-drawn whiteboard, flowchart, sequence, architecture sketch.

Routing

  • User wants editable/collaborative: choose Excalidraw.
  • User wants polished standalone browser output: choose SVG/HTML.
  • Software architecture with infra components: choose architecture SVG.
  • Science, product, process, concept map, physical object: choose clean SVG.
  • Unsure: ask one short question only if output format matters; otherwise choose clean SVG.

Workflow

  1. Extract nodes, groups, labels, and directed relationships.
  2. Pick layout first: left-to-right, top-down, hub-spoke, swimlanes, layered stack, sequence.
  3. Keep labels short. Prefer 5-9 main elements over dense diagrams.
  4. Generate the file at the requested path. If none is provided, use diagram.html or diagram.excalidraw in the current working directory.
  5. Do not overwrite an existing file by default. Choose an unused suffixed name such as diagram-2.html, or ask before replacing the existing file.
  6. Verify syntax by opening or parsing the output when feasible.

SVG/HTML rules

  • Single standalone .html file with inline CSS and inline SVG.
  • No external fonts, JS, images, gradients, glows, decorative blobs, or remote assets.
  • Use semantic colors, not rainbow sequences: neutral, input, process, storage, external, risk.
  • Draw connectors before nodes so arrows sit behind boxes.
  • Every connector path has fill="none" and a marker arrow when directed.
  • Leave 24px text padding inside boxes; do not let text touch borders.
  • Legend only when symbols/colors are not obvious.

SVG template

Use references/svg-template.md as the wrapper and replace <!-- SVG -->.

Excalidraw rules

  • Save .excalidraw JSON with type, version, source, elements, and appState.
  • Use bound text for shape labels. Do not use a nonstandard label property.
  • Keep bound text immediately after its container in the elements array.
  • Minimum labeled shape: 120x60. Minimum body text: 16px.
  • Use roughness 1, fontFamily: 1, and simple fills.

For exact Excalidraw element snippets, read references/excalidraw-patterns.md.

评价

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

评论

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

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

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

0 / 1000 字

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

同一仓库的技能

Review completed code through three roles: a critical reviewer, a verifier, and an adjudicator. Check evidence, look for bugs introduced by fixes, and produce an actionable repair list with regression tests and traceable review reports.

中文简介正在准备中。当前显示英语简介。

  • Reviewing code before a release
  • Checking major refactors for regressions
  • Verifying that reported fixes actually work
iflytek/skillhub52612026年10月19日 更新

Assess factual claims in AI-generated text by separating facts from opinions, choosing suitable independent evidence, and explaining what is supported or uncertain. Use it for a completed fact-check or an optional exercise in evaluating AI answers.

中文简介正在准备中。当前显示英语简介。

  • Fact-checking an AI-generated answer
  • Choosing independent sources for a claim
  • Identifying unverified numbers and assertions
iflytek/skillhub52612026年10月19日 更新

Parse web pages and authorized local documents, audio, or video with Cue Omni Reader. Use the complete results to summarize content, answer questions, locate sections, or save the parsed output.

中文简介正在准备中。当前显示英语简介。

  • Summarizing a web page from its URL
  • Answering questions about a local document
  • Reviewing the content of audio or video
iflytek/skillhub52612026年10月19日 更新

Generate brief daily check-ins, evening reflection questions, and weekly or monthly reviews for individuals and teams. Summarize supplied entries to highlight accomplishments, blockers, and supported patterns, with optional suggestions for next actions.

中文简介正在准备中。当前显示英语简介。

  • Clarifying today's priorities in a morning check-in
  • Drafting an asynchronous team progress update
  • Reflecting on lessons at the end of the day
iflytek/skillhub52612026年10月19日 更新

Compare choices using weighted scores, pros and cons, possible failure scenarios, and what each option means giving up. Make preferences and uncertainty explicit, rank alternatives, and identify information that could change the decision.

中文简介正在准备中。当前显示英语简介。

  • Comparing job offers or client projects
  • Prioritizing features and experiments
  • Exploring failure risks before committing
iflytek/skillhub52612026年10月19日 更新

Create or revise software documentation for learning, completing tasks, checking technical details, or understanding concepts. Organize README sections, API docs, and operational guides around reader needs, with commands and claims checked against available project evidence.

中文简介正在准备中。当前显示英语简介。

  • Rewriting README sections for their intended readers
  • Creating a tutorial for new users
  • Organizing API specifications as reference material
iflytek/skillhub52612026年10月19日 更新

查看 iflytek 的全部技能

报告此技能的问题