以多种格式创建简洁有效的图形和图表。
生成内联 SVG 用于插画、图标、图表和示意图。
最佳实践:
xmlns="http://www.w3.org/2000/svg"，设置合适的 viewBoxtransform 做平移/旋转/缩放font-family font-size text-anchor 等属性role="img" 和 </code> 提升可访问性</li></ul><p><strong>常用模板:</strong></p><ul><li>图标: 24×24 或 48×48 viewBox，单色或双色</li><li>流程图: 节点用圆角矩形，箭头用 <code><marker></code></li><li>数据图: 柱状图/折线图/饼图用 <code><rect></code> <code><polyline></code> <code><path></code></li><li>架构图: 分层布局，不同区域用不同颜色区分</li></ul><h3>2. Mermaid 图表</h3><p>用 Mermaid 语法创建可渲染的图表。</p><p><strong>常用图表类型:</strong></p><pre><code><!-- 流程图 -->
</code></pre><p>graph TD</p><p> A[开始] --> B{判断}</p><p> B -->|是| C[处理]</p><p> B -->|否| D[结束]</p><pre><code>
<!-- 时序图 -->
</code></pre><p>sequenceDiagram</p><p> Alice->>Bob: 你好</p><p> Bob-->>Alice: 嗨</p><pre><code>
<!-- 思维导图 -->
</code></pre><p>mindmap</p><p> root((主题))</p><p> 分支1</p><p> 子项A</p><p> 子项B</p><p> 分支2</p><pre><code>
<!-- 饼图 -->
</code></pre><p>pie title 分布</p><p> "A" : 40</p><p> "B" : 30</p><p> "C" : 30</p><pre><code>
<!-- 类图 -->
</code></pre><p>classDiagram</p><p> class Animal {</p><p> +name: string</p><p> +move(): void</p><p> }</p><pre><code>
<!-- 状态图 -->
</code></pre><p>stateDiagram-v2</p><p> [*] --> 待处理</p><p> 待处理 --> 进行中: 开始</p><p> 进行中 --> 已完成: 完成</p><pre><code>
**何时使用:** 流程图、时序图、甘特图、思维导图等需要交互式渲染的场景，优先用 Mermaid。
### 3. Graphviz DOT
用 DOT 语言绘制有向图、无向图、层次图等复杂图形。
</code></pre><p>digraph G {</p><p> rankdir=LR;</p><p> node [shape=box, style=rounded];</p><p> A -> B -> C;</p><p> A -> D [label="可选"];</p><p> subgraph cluster_1 {</p><p> label="子图";</p><p> E -> F;</p><p> }</p><p>}</p><pre><code>
**何时使用:** 复杂的结构图、依赖关系图、类层次图、自动布局需求时优先用 Graphviz。
### 4. ASCII / Unicode 绘图
在纯文本环境中（终端、注释、文档）绘制简单图形。
**基本元素:**
- 框线: `─ │ ┌ ┐ └ ┘ ├ ┤ ┬ ┴ ┼`（Unicode 盒绘制）
- 箭头: `→ ← ↑ ↓ ↔ ↕`
- 块: `█ ▓ ▒ ░ ▄ ▀`
- 其他: `● ○ ■ □ ◆ ◇ ▲ △ ▼ ▽ ★ ☆`
**示例:**
</code></pre><p>┌─────────────┐ ┌─────────────┐</p><p>│ 客户端 │────▶│ 服务器 │</p><p>└─────────────┘ └─────────────┘</p><p> │ │</p><p> │ │</p><p> ▼ ▼</p><p>┌─────────────┐ ┌─────────────┐</p><p>│ 缓存 │ │ 数据库 │</p><p>└─────────────┘ └─────────────┘</p><pre><code>
## 格式选择指南
| 需求 | 推荐格式 |
|------|---------|
| 图标、插画、自定义图形 | SVG |
| 流程图、时序图、甘特图 | Mermaid |
| 复杂结构图、层次图 | Graphviz DOT |
| 终端显示、代码注释 | ASCII/Unicode |
| 数据可视化（柱状/折线/饼图） | SVG 或 Mermaid |
| 网络/架构图 | SVG 或 Mermaid |
</code></pre></div>
</div>
</div>
<div id="tab-versions" class="detail-content">
<div class="detail-section">
<h2>版本历史</h2>
<p style="margin-bottom:12px;font-size:14px;color:#94a3b8;">共 1 个版本</p>
<ul class="version-list">
<li>
<div>
<span class="version-tag">v1.0.0</span>
<span style="font-size:13px;color:#64748b;margin-left:8px;">Initial release</span> <span style="font-size:11px;color:#5b6abf;margin-left:8px;background:#eef0ff;padding:1px 8px;border-radius:10px;">当前</span> </div>
<div style="font-size:12px;color:#94a3b8;">
2026-05-17 18:50 安全 安全 </div>
</li>
</ul>
</div>
</div>
<div id="tab-security" class="detail-content">
<div class="detail-section">
<h2>安全检测</h2>
<div class="sec-grid"> <div class="sec-card">
<h4>腾讯云安全 (Keen)</h4>
<div class="sec-status sec-safe">
安全，无风险 </div>
<a href="https://tix.qq.com/search/skill?keyword=46c04531e0340b324783f2e82c9af824" target="_blank">查看报告</a> </div>
<div class="sec-card">
<h4>腾讯云安全 (Sanbu)</h4>
<div class="sec-status sec-safe">
安全，无风险 </div>
<a href="https://static.cloudsec.tencent.com/html-report-v2/2026/05/26/460713_3310e6a9dddb629f987fadcbd82a1f10.html?q-sign-algorithm=sha1&q-ak=AKID8JMG1bzBC1dz96qNhssfFftujT1NCoFi&q-sign-time=1781344883%3B1812880883&q-key-time=1781344883%3B1812880883&q-header-list=host&q-url-param-list=&q-signature=a95d53343c9f4919f1beaf5d431ef7b088cfeccb" target="_blank">查看报告</a> </div>
</div>
</div>
</div>
<!-- Recommended Skills -->
<div style="margin-top:24px;">
<h2 style="font-size:18px;font-weight:600;margin-bottom:16px;">🔗 相关推荐</h2>
<div class="rec-grid">
<div class="rec-card">
<span class="badge-cat" style="margin-bottom:8px;display:inline-block;">ai-intelligence</span>
<h3><a href="/s/ontology">ontology</a></h3>
<div class="rec-owner">oswalpalash</div> <div class="rec-desc">类型化知识图谱，用于结构化智能体记忆与可组合技能。支持创建/查询实体（人员、项目、任务、事件、文档）及关联...</div>
<div class="rec-stats">
<span style="color:#f39c12;">★ 712</span>
<span style="color:#5b6abf;">📥 243,801</span>
</div>
</div>
<div class="rec-card">
<span class="badge-cat" style="margin-bottom:8px;display:inline-block;">developer-tools</span>
<h3><a href="/s/github">Github</a></h3>
<div class="rec-owner">steipete</div> <div class="rec-desc">使用 `gh` CLI 与 GitHub 交互，通过 `gh issue`、`gh pr`、`gh run` 和 `gh api` 管理议题、PR、CI 运行及高级查询。</div>
<div class="rec-stats">
<span style="color:#f39c12;">★ 668</span>
<span style="color:#5b6abf;">📥 324,132</span>
</div>
</div>
<div class="rec-card">
<span class="badge-cat" style="margin-bottom:8px;display:inline-block;">security-compliance</span>
<h3><a href="/s/skill-vetter">Skill Vetter</a></h3>
<div class="rec-owner">spclaudehome</div> <div class="rec-desc">AI智能体技能安全预审工具。安装ClawdHub、GitHub等来源技能前，检查风险信号、权限范围及可疑模式。</div>
<div class="rec-stats">
<span style="color:#f39c12;">★ 1,215</span>
<span style="color:#5b6abf;">📥 266,514</span>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded',function(){
document.querySelectorAll('.detail-tab').forEach(function(btn){
btn.addEventListener('click',function(e){
var tab = this.getAttribute('data-tab');
document.querySelectorAll('.detail-tab').forEach(function(b){b.classList.remove('active')});
document.querySelectorAll('.detail-content').forEach(function(c){c.classList.remove('active')});
this.classList.add('active');
var el = document.getElementById('tab-'+tab);
if(el) el.classList.add('active');
});
});
});
</script>
<div class="footer">
<p>Skill工具集 © 2026</p>
</div></body>
</html>