rpdil23/GraphLens

Interactive 2D & 3D browser visualizer for Microsoft GraphRAG pipelines and Graphify codebase knowledge graphs. 100% client-side & private.

TypeScript

1

2 commits

updated Oct 16, 2026

See the code

See what people are saying

SourceMessageScoreDate

I built an in-browser 2D/3D visualizer for Microsoft GraphRAG (no backend, parses parquet locally) (r/LLMDevs)

# Title I built an in-browser 2D/3D visualizer for Microsoft GraphRAG (no backend, parses parquet locally) [Demo](https://raw.githubusercontent.com/rpdil23/GraphLens/main/public/demo.gif) # Body Whenever I ran Microsoft GraphRAG, inspecting the output parquet files was annoying. Opening them in…

2

Oct 15, 2026

README

GraphLens

Interactive 2D & 3D Dual-Engine Visualizer for Microsoft GraphRAG and Graphify Codebase Knowledge Graphs.

License: MIT Node: >=18

GraphLens Demo


Overview

GraphLens is an open-source, client-side knowledge graph visualizer designed to seamlessly explore both Microsoft GraphRAG LLM pipelines and Graphify codebase structural graphs.

Everything runs directly in your browser using Web Workers and WebGL—ensuring zero setup, high performance, and complete data privacy without sending any files to external servers.


Key Features

  • 🌐 Dual-Engine Graph Support:
    • Graphify: Visualize software architectures, AST call graphs, class hierarchies, file dependencies, and auto-detected communities.
    • Microsoft GraphRAG: Visualize entities, relationships, documents, text units, covariates, and community summaries from indexing pipelines.
  • 🎨 2D & 3D Force-Directed Simulation: Switch seamlessly between 2D canvas and 3D WebGL force-directed layouts with physics controls, link particles, and collision forces.
  • 🔒 100% Client-Side Privacy: Fast in-browser Parquet (via hyparquet) and JSON parsing. No backend required and no tracking telemetry.
  • 🔍 Fuzzy Search & Node Inspection: Instant symbol and entity search via Fuse.js with detail drawers showing connected neighbors and attributes.
  • 📊 Interactive Data Tables: Sort, filter, search, and paginate raw entities, relationships, communities, and reports using material-react-table.
  • 🌓 Theme Support: Built-in Dark and Light themes with responsive, glassmorphic UI.

Supported File Formats

1. Graphify Codebase Graphs

Drag & drop your graphify-out/ folder or individual files into GraphLens:

FileFormatStatusDescription
graph.jsonJSONRequiredComplete AST code graph: nodes (functions, classes, modules), directional edges, communities, and file locations.
GRAPH_REPORT.mdMarkdownOptionalUnlocks the Architecture & God Nodes report tab with cohesion metrics and community summaries.
manifest.jsonJSONOptionalUnlocks the Files Manifest table showing source files, LoC, and extracted symbol counts.
.graphify_labels.jsonJSONOptionalHuman-readable community cluster titles (falls back to graph.json community names).

Tip: You can also click "Load Example Graphify Dataset" on the upload screen to explore preloaded sample data immediately.

2. Microsoft GraphRAG Parquet Artifacts

Drag & drop your .parquet files or place them into public/artifacts/:

GraphRAG v2.xGraphRAG v1.x (Legacy)Data TypeDescription
entities.parquetcreate_final_entities.parquetEntitiesExtracted named entities, semantic categories, and descriptions
relationships.parquetcreate_final_relationships.parquetEdgesDirected relationships between entities with weights
documents.parquetcreate_final_documents.parquetDocumentsSource raw documents
text_units.parquetcreate_final_text_units.parquetChunksText chunk units derived from documents
communities.parquetcreate_final_communities.parquetClustersHierarchical communities detected across entities
community_reports.parquetcreate_final_community_reports.parquetReportsLLM synthesis reports and findings per community
covariates.parquetcreate_final_covariates.parquetClaimsExtracted claim covariates

Tip: Click "Load Example GraphRAG Dataset" on the upload screen to test GraphRAG visualization without uploading any files.


Graph Data Model

Node Types

Node TypeEngineDescription
FUNCTION, CLASS, MODULE, INTERFACEGraphifyCode symbols extracted via AST analysis
COMMUNITYGraphify & GraphRAGClustered module or semantic community
Extracted Semantic Types (PERSON, ORG, GEO, etc.)GraphRAGLLM-extracted domain entities
RAW_DOCUMENTGraphRAGSource raw documents
CHUNKGraphRAGText chunk units with token counts
FINDINGGraphRAGKey community findings and explanations
COVARIATEGraphRAGClaims, temporal metadata, and covariate entities

Relationship / Edge Types

Source NodeEdge TypeTarget NodeEngineDescription
Function / ClasscallsFunction / MethodGraphifyExecution or invocation call
Module / ClasscontainsFunction / ClassGraphifyStructural hierarchy & membership
File / ModuleimportsModule / PackageGraphifyModule import dependency
ClassextendsBase ClassGraphifyClass inheritance / interface implementation
SymbolreferencesSymbol / FileGraphifyVariable, symbol, or type reference
EntityRELATEDEntityGraphRAGSemantic relationship with weight
Text UnitPART_OFDocumentGraphRAGChunk belongs to source document
Text UnitHAS_ENTITYEntityGraphRAGText unit references extracted entity
Text UnitHAS_COVARIATECovariateGraphRAGText unit contains claim/covariate
CommunityHAS_FINDINGFindingGraphRAGCommunity report links to finding
Entity / SymbolIN_COMMUNITYCommunityBothNode belongs to detected community cluster

Getting Started

Prerequisites

  • Node.js 18+
  • npm or pnpm

Installation

# Clone the repository
git clone https://github.com/rpdil23/GraphLens.git
cd GraphLens

# Install dependencies
npm install

# Start local development server
npm start

Visit http://localhost:3000 in your browser.

Building for Production

npm run build

The optimized bundle will be generated in build/.

Deployment to GitHub Pages

npm run deploy

Verification & Testing

# Typecheck TypeScript
npx tsc --noEmit

# Run unit tests
npm test -- --watchAll=false

# Test production build
npm run build

Contributing

Contributions, bug reports, and suggestions are welcome!

  1. Fork the repository.
  2. Create your feature branch (git checkout -b feat/my-feature).
  3. Commit your changes (git commit -m 'feat: add my feature').
  4. Push to the branch (git push origin feat/my-feature).
  5. Open a Pull Request.

Acknowledgements & Attribution

GraphLens is extended from the original graphrag-visualizer created by Yan-Ying Liao (noworneverev).

We express our gratitude to the original project and Microsoft GraphRAG team for the foundation that made this multi-source visualizer possible.


License

This project is licensed under the MIT License.

graphify
graphrag
microsoft-graph
rag
vizualisation

rpdil23/GraphLens

Interactive 2D & 3D browser visualizer for Microsoft GraphRAG pipelines and Graphify codebase knowledge graphs. 100% client-side & private.

TypeScript

1

2 commits

updated Oct 16, 2026

See the code

See what people are saying

SourceMessageScoreDate

I built an in-browser 2D/3D visualizer for Microsoft GraphRAG (no backend, parses parquet locally) (r/LLMDevs)

# Title I built an in-browser 2D/3D visualizer for Microsoft GraphRAG (no backend, parses parquet locally) [Demo](https://raw.githubusercontent.com/rpdil23/GraphLens/main/public/demo.gif) # Body Whenever I ran Microsoft GraphRAG, inspecting the output parquet files was annoying. Opening them in…

2

Oct 15, 2026

README

GraphLens

Interactive 2D & 3D Dual-Engine Visualizer for Microsoft GraphRAG and Graphify Codebase Knowledge Graphs.

License: MIT Node: >=18

GraphLens Demo


Overview

GraphLens is an open-source, client-side knowledge graph visualizer designed to seamlessly explore both Microsoft GraphRAG LLM pipelines and Graphify codebase structural graphs.

Everything runs directly in your browser using Web Workers and WebGL—ensuring zero setup, high performance, and complete data privacy without sending any files to external servers.


Key Features

  • 🌐 Dual-Engine Graph Support:
    • Graphify: Visualize software architectures, AST call graphs, class hierarchies, file dependencies, and auto-detected communities.
    • Microsoft GraphRAG: Visualize entities, relationships, documents, text units, covariates, and community summaries from indexing pipelines.
  • 🎨 2D & 3D Force-Directed Simulation: Switch seamlessly between 2D canvas and 3D WebGL force-directed layouts with physics controls, link particles, and collision forces.
  • 🔒 100% Client-Side Privacy: Fast in-browser Parquet (via hyparquet) and JSON parsing. No backend required and no tracking telemetry.
  • 🔍 Fuzzy Search & Node Inspection: Instant symbol and entity search via Fuse.js with detail drawers showing connected neighbors and attributes.
  • 📊 Interactive Data Tables: Sort, filter, search, and paginate raw entities, relationships, communities, and reports using material-react-table.
  • 🌓 Theme Support: Built-in Dark and Light themes with responsive, glassmorphic UI.

Supported File Formats

1. Graphify Codebase Graphs

Drag & drop your graphify-out/ folder or individual files into GraphLens:

FileFormatStatusDescription
graph.jsonJSONRequiredComplete AST code graph: nodes (functions, classes, modules), directional edges, communities, and file locations.
GRAPH_REPORT.mdMarkdownOptionalUnlocks the Architecture & God Nodes report tab with cohesion metrics and community summaries.
manifest.jsonJSONOptionalUnlocks the Files Manifest table showing source files, LoC, and extracted symbol counts.
.graphify_labels.jsonJSONOptionalHuman-readable community cluster titles (falls back to graph.json community names).

Tip: You can also click "Load Example Graphify Dataset" on the upload screen to explore preloaded sample data immediately.

2. Microsoft GraphRAG Parquet Artifacts

Drag & drop your .parquet files or place them into public/artifacts/:

GraphRAG v2.xGraphRAG v1.x (Legacy)Data TypeDescription
entities.parquetcreate_final_entities.parquetEntitiesExtracted named entities, semantic categories, and descriptions
relationships.parquetcreate_final_relationships.parquetEdgesDirected relationships between entities with weights
documents.parquetcreate_final_documents.parquetDocumentsSource raw documents
text_units.parquetcreate_final_text_units.parquetChunksText chunk units derived from documents
communities.parquetcreate_final_communities.parquetClustersHierarchical communities detected across entities
community_reports.parquetcreate_final_community_reports.parquetReportsLLM synthesis reports and findings per community
covariates.parquetcreate_final_covariates.parquetClaimsExtracted claim covariates

Tip: Click "Load Example GraphRAG Dataset" on the upload screen to test GraphRAG visualization without uploading any files.


Graph Data Model

Node Types

Node TypeEngineDescription
FUNCTION, CLASS, MODULE, INTERFACEGraphifyCode symbols extracted via AST analysis
COMMUNITYGraphify & GraphRAGClustered module or semantic community
Extracted Semantic Types (PERSON, ORG, GEO, etc.)GraphRAGLLM-extracted domain entities
RAW_DOCUMENTGraphRAGSource raw documents
CHUNKGraphRAGText chunk units with token counts
FINDINGGraphRAGKey community findings and explanations
COVARIATEGraphRAGClaims, temporal metadata, and covariate entities

Relationship / Edge Types

Source NodeEdge TypeTarget NodeEngineDescription
Function / ClasscallsFunction / MethodGraphifyExecution or invocation call
Module / ClasscontainsFunction / ClassGraphifyStructural hierarchy & membership
File / ModuleimportsModule / PackageGraphifyModule import dependency
ClassextendsBase ClassGraphifyClass inheritance / interface implementation
SymbolreferencesSymbol / FileGraphifyVariable, symbol, or type reference
EntityRELATEDEntityGraphRAGSemantic relationship with weight
Text UnitPART_OFDocumentGraphRAGChunk belongs to source document
Text UnitHAS_ENTITYEntityGraphRAGText unit references extracted entity
Text UnitHAS_COVARIATECovariateGraphRAGText unit contains claim/covariate
CommunityHAS_FINDINGFindingGraphRAGCommunity report links to finding
Entity / SymbolIN_COMMUNITYCommunityBothNode belongs to detected community cluster

Getting Started

Prerequisites

  • Node.js 18+
  • npm or pnpm

Installation

# Clone the repository
git clone https://github.com/rpdil23/GraphLens.git
cd GraphLens

# Install dependencies
npm install

# Start local development server
npm start

Visit http://localhost:3000 in your browser.

Building for Production

npm run build

The optimized bundle will be generated in build/.

Deployment to GitHub Pages

npm run deploy

Verification & Testing

# Typecheck TypeScript
npx tsc --noEmit

# Run unit tests
npm test -- --watchAll=false

# Test production build
npm run build

Contributing

Contributions, bug reports, and suggestions are welcome!

  1. Fork the repository.
  2. Create your feature branch (git checkout -b feat/my-feature).
  3. Commit your changes (git commit -m 'feat: add my feature').
  4. Push to the branch (git push origin feat/my-feature).
  5. Open a Pull Request.

Acknowledgements & Attribution

GraphLens is extended from the original graphrag-visualizer created by Yan-Ying Liao (noworneverev).

We express our gratitude to the original project and Microsoft GraphRAG team for the foundation that made this multi-source visualizer possible.


License

This project is licensed under the MIT License.

graphify
graphrag
microsoft-graph
rag
vizualisation