SvelteUML

Architecture and Dependency Visualization for SvelteKit: TypeScript-Native PlantUML Generator.

Generates PlantUML class and package diagrams from SvelteKit codebases using static analysis (svelte2tsx + ts-morph pipeline). No runtime required — analyzes your source code directly.

Installation

# npm
npm install -g svelteuml

# pnpm
pnpm add -g svelteuml

# Or use without installing
npx svelteuml ./my-sveltekit-app

Quick Start

# Generate a PlantUML diagram from a SvelteKit project
svelteuml ./my-sveltekit-app

# Specify output path
svelteuml ./my-sveltekit-app -o architecture.puml

# Generate SVG (requires Java + PlantUML)
svelteuml ./my-sveltekit-app -f svg -o diagram.svg

Usage

svelteuml <target-directory> [options]

Options

Examples

# Generate diagram excluding node_modules dependencies
svelteuml ./my-app --exclude-externals

# Limit dependency depth to 2 levels
svelteuml ./my-app --max-depth 2

# Exclude test files and generated code
svelteuml ./my-app -e "**/*.test.ts" -e "**/__generated__/**"

# Hide type-only imports for cleaner diagrams
svelteuml ./my-app --hide-type-deps

# Watch mode — regenerate on file changes
svelteuml ./my-app --watch

# Output to stdout (pipe to other tools)
svelteuml ./my-app -f text | plantuml -pipe > diagram.svg

Configuration

Create a .svelteumlrc.json in your project root to set default options:

{
  "targetDir": "./src",
  "outputPath": "docs/architecture.puml",
  "exclude": ["**/*.test.ts", "**/*.spec.ts"],
  "include": [],
  "maxDepth": 3,
  "excludeExternals": true,
  "aliasOverrides": {
    "$custom": "./src/custom"
  }
}

Config Schema

CLI flags override config file values.

Architecture

SvelteUML uses a 5-phase pipeline:

┌─────────────┐    ┌───────────┐    ┌─────────────┐    ┌────────────┐    ┌───────────┐
│  Discovery  │───>│  Parsing  │───>│  Extraction │───>│ Resolution │───>│ Emission  │
│             │    │           │    │             │    │            │    │           │
│ Find files  │    │ svelte2tsx│    │  Symbols    │    │  Edges     │    │ PlantUML  │
│ Load config │    │ ts-morph  │    │  Props      │    │  Imports   │    │  DSL      │
│ Aliases     │    │ VFS       │    │  Routes     │    │  Reactive  │    │  SVG/PNG  │
└─────────────┘    └───────────┘    └─────────────┘    └────────────┘    └───────────┘

1. Discovery — Recursively find .svelte, .ts, .js files. Load svelte.config.js and .svelte-kit/tsconfig.json for path aliases.
2. Parsing — Transform .svelte SFCs to TSX via svelte2tsx. Build a ts-morph Project with virtual file system.
3. Extraction — Extract components, props, stores, routes, server endpoints, lib functions/classes.
4. Resolution — Scan imports, build dependency edges (composition, inheritance, type, store). Track reactive $state/$derived cross-file references.
5. Emission — Generate PlantUML DSL with nested packages, stereotypes, and relationship arrows.

Supported Features

Example Output

@startuml
skinparam classAttributeIconSize 0

package "routes" {
  package "(auth)" {
    class "+page" <<page>> {
      +load(): PageLoad
    }
    class "+layout" <<layout>> {
      +load(): LayoutLoad
    }
  }
  package "api/users" {
    class "+server" <<endpoint>> {
      +GET(): RequestHandler
      +POST(): RequestHandler
    }
  }
}

package "$lib" {
  class "stores/auth" <<store>> {
    +user: Writable<User>
    +login(): Promise<void>
  }
  class "components/Button" <<component>> {
    +label: string
    +onClick(): void
  }
}

"+page" --> "stores/auth" : store
"+layout" --> "stores/auth" : store
"+server" --> "stores/auth" : composition
@enduml

Development

Contributing

1. Clone the repository
2. Install dependencies: pnpm install
3. Create a feature branch: git checkout -b feature/my-feature
4. Make changes and add tests
5. Run checks: pnpm test && pnpm run typecheck && pnpm run lint
6. Submit a pull request

License

MIT