@symbolic/graphical

Graphical

Multi-resolution graph engine. See your codebase at any zoom level — from entire subsystems down to individual function calls. Export to 15+ formats.

Multi-Resolution Zoom

Six semantic zoom levels. Zoom out to see subsystems, zoom in to see call sites.

Domain

Bounded contexts & subsystems

Auth, Billing, Core

Package

npm packages / crate boundaries

@symbolic/core

Module

Directory-level groupings

src/auth/

File

Individual source files

Symbol

Functions, classes, types

LoginService

CallSite

Individual call edges

line 42: login()

Live Demo

Interactive graph of a sample codebase. Toggle edge types, switch layouts, click nodes to inspect.

Layout:

Edges:

Hide imports

8 files / 28 symbols / 40 edgessample data — typescript

Open in full explorer with tree view and detail panel →

15 Export Formats

Same graph, any format. Visualization tools, diagramming apps, or data analysis pipelines.

DOT

Mermaid

JSON

SVG

Cytoscape

GEXF

GraphML

PlantUML

Excalidraw

draw.io

CSV

NetworkX

Neo4j

GraphViz DOT.dot

digraph sym {
  rankdir="LR";
  node [shape=box, style=filled, fontname="monospace", fontsize=10];

  // Modules
  "routes.ts"    [label="api/routes.ts",    fillcolor="#18181b", fontcolor="#22c55e"];
  "login.ts"     [label="auth/login.ts",    fillcolor="#18181b", fontcolor="#22c55e"];
  "users.ts"     [label="db/users.ts",      fillcolor="#18181b", fontcolor="#22c55e"];
  "auth.ts"      [label="types/auth.ts",    fillcolor="#18181b", fontcolor="#22c55e"];

  // Symbols
  "registerRoutes" [label="registerRoutes", fillcolor="#18181b", fontcolor="#4a9eff"];
  "LoginService"   [label="LoginService",   fillcolor="#18181b", fontcolor="#a855f7"];
  "UserRepo"       [label="UserRepo",       fillcolor="#18181b", fontcolor="#a855f7"];
  "AuthToken"      [label="AuthToken",      fillcolor="#18181b", fontcolor="#06b6d4"];

  // Edges
  "routes.ts"      -> "login.ts"      [color="#4a9eff", style=dashed, label="imports"];
  "login.ts"       -> "users.ts"      [color="#4a9eff", style=dashed, label="imports"];
  "login.ts"       -> "auth.ts"       [color="#4a9eff", style=dashed, label="imports"];
  "registerRoutes" -> "LoginService"  [color="#4ade80", label="calls"];
  "LoginService"   -> "UserRepo"      [color="#f43f5e", label="depends-on"];
  "LoginService"   -> "AuthToken"     [color="#06b6d4", label="type-ref"];
}

Semantic Color System

Every symbol kind and edge type has a distinct color. Consistent across all views and exports.

Symbol Kinds

function#4a9eff

class#a855f7

interface#06b6d4

type#14b8a6

variable#f97316

constant#eab308

enum#ec4899

module#22c55e

method#60a5fa

property#fb923c

namespace#8b5cf6

import#64748b

export#84cc16

parameter#94a3b8

Edge Types

imports#4a9eff

calls#4ade80

extends#f97316

implements#a855f7

exports#eab308

contains#52525b

type-references#06b6d4

depends-on#f43f5e

Getting Started

Three commands to go from code to graph.

terminal

# Install

$ npm install -g @symbolic/cli

# Index your codebase

$ sym index

Indexing 847 files... 12,431 symbols, 28,902 edges

# Export as any format

$ sym graph --format dot -o graph.dot

$ sym graph --format mermaid -o graph.mmd

$ sym graph --format json -o graph.json

# Or visualize in the browser

$ sym graph --format json -o graph.json

Upload graph.json to symbolic.wtf/explore

Try the Explorer View on GitHub