证据快照复核于 2026-09-01GitHub 数据核对日期： 2026-08-21
DSHub.
Plugin RSS
来源已审查独立 Skill界面与体验mobius Profile

mobius-architecture-draw

从 Mobius 项目仓库生成精美、独立可打开的 HTML/SVG 架构图。

打开源码项目 ↗在 GitHub 查看 ↗更多 Skill

快速了解

它能做什么

从 Mobius 项目仓库生成精美、独立可打开的 HTML/SVG 架构图。

本站提供的是中文说明，不代表该项目或 Plugin 自身提供中文界面；语言支持请以上游文档为准。

能力
界面与体验可视化文档文件

选择前先看

这是 Mobius 的内置技能，会检查项目中的关键文件，将系统归纳为有意义的组件，并写入 `.imac/generated_figures/arch.html`。生成文件内嵌 CSS 和 SVG，可直接在浏览器打开，无需构建步骤或远程资源。

适合谁

需要为现有项目制作清晰技术架构概览的 Mobius 用户。

常见任务

  • 梳理项目的前端、后端、存储、工作器和外部集成。
  • 在代码审查、项目交接或方案规划前生成可分享的架构视图。
  • 为大型仓库生成简明的顶层架构图，而不是逐文件罗列。

权限与数据

读取项目文件以推断架构，并在项目内写入生成的图表文件。

权限
  • 读取仓库文档、清单、配置和关键源文件。
  • 创建 `.imac/generated_figures/arch.html`，以及可选的 SVG 或图片预览。
数据处理
  • 架构内容来自当前项目工作区。
  • 生成的 HTML 设计为自包含，内嵌 CSS 和 SVG。
外部服务
  • 主要 HTML 输出不需要远程 CSS、字体、图片、导入资源或图像生成服务。
凭据
  • 提供的技能文档未说明需要凭证。

局限

  • 该技能专为 Mobius 内置环境设计，并依赖当前 Mobius 会话上下文。
  • 图表会概括 5–10 个有意义的组件，而非展示每个文件或所有关系。
  • 该仓库软件的商业使用需要另行获得许可证。

DSHub 已核对

  • 已从不可变的固定提交中捕获完整技能文档。
  • 文档说明主要输出为内嵌 CSS 和 SVG 的 `.imac/generated_figures/arch.html`。

DSHub 未核对

  • DSHub 未运行该技能，也未检查实际生成的图表。

固定版本安装

主要操作

这个独立 Skill没有 DSH Plugin 安装操作，请根据源码文档使用真实交付方式。

访问源码项目 ↗

维护者原文

Skill 使用说明

查看 commit 1eb8750 对应的 SKILL.md ↗
维护者编写的上游内容原文于 2026/8/30 从 skills/mobius-architecture-draw/SKILL.md 获取，正文和仓库相对媒体固定到 commit 1eb8750d2d90，内容哈希为 77c1ebbdd609。以下是未经 DSHub 翻译的上游原文，语言可能与当前页面不同；第三方托管的 badge 可能独立更新。

name: mobius-architecture-draw description: Analyze a Mobius project repository and generate a single-file HTML/SVG architecture diagram at .imac/generated_figures/arch.html, with optional image fallbacks.

Mobius Architecture Diagram Generator

This is a Mobius built-in Skill. Do not ask the user to install or invoke Codex Skills, Claude Code Skills, or any assistant-side Memory/Skill system. Use only the project files and the Mobius context injected into the current Session.

Goal

Analyze the current project workspace and generate a polished architecture diagram as a self-contained file:

  • Primary output: .imac/generated_figures/arch.html
  • Optional fallback previews: .imac/generated_figures/arch.svg, .imac/generated_figures/arch.png, or .imac/generated_figures/arch.jpg

The HTML file must contain embedded CSS and an embedded SVG diagram. It should open directly in a browser and should not require any build step, package install, external JavaScript, CDN, web font, or image generation service.

Required Workflow

  1. Inspect the repository before drawing.

    • Read README*, package manifests, config files, backend/frontend entry points, extension manifests, and key service/router/component files.
    • Prefer rg --files, find with bounded depth, and direct file reads.
    • Ignore noisy generated folders such as .git, .imac/flags, .imac/generated_figures, node_modules, dist, build, coverage, .next, .nuxt, target, vendor, and large asset directories.

  2. Build a concise architecture model.

    • Identify user-facing entry points.
    • Identify frontend modules, backend routes/services, data stores, workers, external integrations, queues, caches, and generated artifacts.
    • Group related files into 5-10 meaningful components. Do not draw every file.
    • Add the most important data/control flows only. Prefer readable diagrams over exhaustive diagrams.

  3. Generate .imac/generated_figures/arch.html.

    • Create the output directory if it does not exist.
    • Write valid UTF-8 HTML with inline CSS and inline SVG.
    • No <script> tags. No remote CSS, fonts, images, iframes, or imports.
    • Use semantic colors by component category.
    • Include a title, timestamp, project summary, legend, architecture SVG, and short notes card.
    • The SVG must include arrow markers, labels, and readable text.

  4. Verify the output.

    • Confirm the file exists at .imac/generated_figures/arch.html.
    • If possible, open or inspect it enough to catch broken tags, blank SVG, missing labels, or impossible arrows.
    • If you create an optional raster image, keep arch.html as the primary output.

  5. Finish cleanly.

    • Report the exact output path and a short summary of what the diagram shows.
    • Remove this Session's running.flag if the current task instructions ask for it.

Visual Standard

Use a dark technical-report style inspired by modern architecture diagram tools:

  • Background: near-black or deep slate.
  • Typography: system sans for body; system monospace for component labels and file/path hints.
  • Layout: header, two-column summary/legend band, large diagram area, compact notes section.
  • Components: rounded rectangles with subtle borders and category accent colors.
  • Flows: curved or orthogonal SVG paths with arrowheads. Use different stroke styles for request flow, data flow, file generation, and optional external service calls.
  • Accessibility: high contrast, no tiny text, no color-only meaning. Every category should also have a text label.

Suggested category colors:

  • UI / client: blue
  • API / backend route: violet
  • Service / domain logic: cyan
  • Storage / database / files: emerald
  • Worker / agent / automation: amber
  • External service / network: rose
  • Generated output: lime

HTML Structure

Use this structure as a guide, adapting labels and positions to the project:

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Project Architecture Diagram</title>
  <style>
    :root {
      color-scheme: dark;
      --bg: #0b1020;
      --panel: #111827;
      --panel-2: #0f172a;
      --text: #e5e7eb;
      --muted: #94a3b8;
      --line: rgba(148, 163, 184, 0.35);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      background: radial-gradient(circle at top left, rgba(59,130,246,.18), transparent 32rem), var(--bg);
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.5;
    }
    .page { max-width: 1440px; margin: 0 auto; padding: 32px; }
    .panel {
      border: 1px solid var(--line);
      background: rgba(15, 23, 42, .82);
      border-radius: 16px;
      box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
    }
    .diagram { width: 100%; height: auto; display: block; }
    .mono { font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
  </style>
</head>
<body>
  <main class="page">
    <header>...</header>
    <section class="panel">summary and legend...</section>
    <section class="panel">
      <svg class="diagram" viewBox="0 0 1400 900" role="img" aria-label="Architecture diagram">
        <defs>
          <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
            <path d="M 0 0 L 10 5 L 0 10 z" fill="#94a3b8"></path>
          </marker>
        </defs>
        <!-- components and flows -->
      </svg>
    </section>
    <section class="panel">notes...</section>
  </main>
</body>
</html>

Diagram Content Rules

  • Name components by business role first, then include representative files in smaller monospace text.
  • Use arrows only for real inferred relationships. If a relationship is uncertain, label it as inferred or omit it.
  • Put external dependencies outside the main system boundary.
  • Put generated outputs such as reports, figures, exported files, or build artifacts in a distinct area.
  • Keep labels short. Use 2-4 words for main node names and 1-2 representative file paths underneath.
  • For large monorepos, draw one top-level diagram and add a "Key directories" notes card instead of creating an unreadable file map.

Output Quality Checklist

Before finishing, make sure:

  • .imac/generated_figures/arch.html exists.
  • The file is self-contained and has no <script> tag.
  • SVG has a non-empty viewBox and visible component nodes.
  • Component text is readable against the background.
  • The diagram contains a clear data/control flow from user entry to backend, storage, workers/agents, and generated artifacts when those concepts exist.
  • The final response tells the user what was generated and where it was saved.

有意识地管理

安装与管理

前置条件与目标 Profile

目标： mobius Profile

交付方式： Skill 文件 — https://raw.githubusercontent.com/nutshellai-tech/mobius/1eb8750d2d9012e1f50a18f7c60c2ad040c04889/skills/mobius-architecture-draw/SKILL.md。

兼容性与访问范围

Mobius built-in skill for an active project workspace session： Not declared in supplied evidence。

检查兼容性证据 ↗

风险事实

license

Source-available license: commercial use requires a separate license.

证据 ↗
证据与编辑审查Manifest、Bundle patch、分发与新鲜度

不可变证据

审查状态与源码活动

人工已批准

在核对来源内容和不可变发布记录后，已由人工批准发布。AI 参与了内容草稿生成，最终发布决定由人工完成。

人工审查于 2026/9/1 UTC 09:41。GitHub 事实核对日期： 2026/9/1 UTC 08:45。

自当前证据基线以来，没有记录到重要源码变化。

下一步

比较生态 Artifact 类型 →

订阅重要变化： mobius-architecture-draw →