At a glance

What it does

Creates a polished, self-contained HTML/SVG architecture diagram from a Mobius project repository.

Before you choose it

This Mobius built-in skill examines key project files, groups the system into meaningful components, and writes an architecture diagram to `.imac/generated_figures/arch.html`. The output embeds its CSS and SVG, so it opens directly in a browser without a build step or remote assets.

Best for

Mobius users who need a readable technical overview of an existing project.

Common tasks

Document a project's frontend, backend, storage, workers, and external integrations.
Create a shareable architecture view before code review, onboarding, or planning.
Generate a concise top-level diagram for a large repository instead of a file-by-file map.

Permissions and data

Reads project files to infer architecture and writes generated diagram files inside the project.

Permissions

Read repository documentation, manifests, configuration, and key source files.
Create `.imac/generated_figures/arch.html` and optional SVG or image previews.

Data handling

Architecture content is derived from the current project workspace.
The generated HTML is designed to be self-contained, with inline CSS and SVG.

External services

No remote CSS, fonts, images, imports, or image-generation service are required for the primary HTML output.

Credentials

No credentials are described in the supplied skill document.

Limitations

Designed specifically as a Mobius built-in skill and relies on the current Mobius session context.
The diagram summarizes 5–10 meaningful components rather than every file or relationship.
Commercial use of the repository software requires a separate license.

What DSHub checked

A complete skill document was captured from an immutable pinned source commit.
The documented primary output is `.imac/generated_figures/arch.html` with embedded CSS and SVG.

What DSHub did not check

DSHub did not execute the skill or inspect a generated diagram.

Pinned install

Primary action

This standalone skill does not have a DSH Plugin install action. Use its source documentation for the delivery method.

Visit the source project ↗

Maintainer source

Skill instructions

View at commit 1eb8750 ↗

Maintainer-authored contentCaptured from skills/mobius-architecture-draw/SKILL.md on Aug 30, 2026. The text and repository-relative media are fixed to commit 1eb8750d2d90 with content hash 77c1ebbdd609; provider-hosted badges may update independently. SKILL.md commands are upstream documentation; use the type-correct primary action above and verify it against this pinned source.

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

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.
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.
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.
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.
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.

Operate deliberately

Install and manage

Prerequisites and target Profile

Target： Mobius Profile

Delivery： Skill Files — https://raw.githubusercontent.com/nutshellai-tech/mobius/1eb8750d2d9012e1f50a18f7c60c2ad040c04889/skills/mobius-architecture-draw/SKILL.md。

Compatibility and access

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

Review compatibility evidence ↗

Risk facts

License

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

Evidence ↗

Evidence and editorial reviewManifest, Bundle patch, distribution and freshness

Immutable evidence

Source commit 1eb8750d2d90 ↗

Review status and source activity

Human approved

Approved for publication after reviewing the source-linked content and immutable release record. AI assisted with the draft; the publication decision was human.

Human reviewed Sep 1, 2026, 9:41 AM UTC。GitHub facts last checked Sep 1, 2026, 8:45 AM UTC。

No material source change has been recorded since this evidence baseline.

Next step

Compare ecosystem artifact types →

Subscribe to material changes for mobius-architecture-draw →