code-network-gen

parses js/vue codebases and outputs function call networks as csv or gexf files. useful for understanding code structure, dependencies, and architectural patterns.

quick start

analyze any codebase in one command:

npx code-network-gen --path . -o my_code_network

that's it. creates my_code_network_nodes.csv and my_code_network_edges.csv in seconds.

example output

here's what the tool finds when analyzing a simple CLI app with 12 functions across 4 files:

nodes.csv (functions and methods):

"id","label","type","lines"
"data.js:loadBookmarks","loadBookmarks","function","[14-31]"
"data.js:formatTableData","formatTableData","function","[37-54]"
"data.js:reloadBookmarks","reloadBookmarks","function","[56-62]"
"data.js:searchBookmarks","searchBookmarks","function","[64-84]"
"index.mjs:showLoadingScreen","showLoadingScreen","function","[13-85]"
"index.mjs:main","main","function","[88-156]"
"ui.js:viewSummary","viewSummary","function","[21-65]"
"ui.js:updateSummary","updateSummary","function","[67-90]"

edges.csv (function call relationships):

"source","target","type"
"data.js:global","data.js:loadBookmarks","calls"
"index.mjs:global","index.mjs:showLoadingScreen","calls"
"index.mjs:global","data.js:loadBookmarks","calls"
"index.mjs:global","index.mjs:main","calls"
"ui.js:global","ui.js:viewSummary","calls"
"ui.js:global","data.js:formatTableData","calls"
"ui.js:global","ui.js:updateDisplay","calls"
"ui.js:global","data.js:reloadBookmarks","calls"

shows clear separation between data handling (data.js), user interface (ui.js), and application entry point (index.mjs). perfect for understanding code architecture at a glance.

mermaid diagram (renders directly on GitHub):

flowchart TD
    %% Code Network Analysis - Generated by code-network-gen
    %% Total nodes: 15, Total edges: 13

    data_js_loadBookmarks["loadBookmarks [14-31] (function)"]
    data_js_formatTableData["formatTableData [37-54] (function)"]
    data_js_reloadBookmarks["reloadBookmarks [56-62] (function)"]
    data_js_searchBookmarks["searchBookmarks [64-84] (function)"]
    data_js_displayScrapJson["displayScrapJson [86-105] (function)"]
    index_mjs_showLoadingScreen["showLoadingScreen [13-85] (function)"]
    index_mjs_main["main [88-156] (function)"]
    ui_js_stopCurrentAnimation["stopCurrentAnimation [14-19] (function)"]
    ui_js_viewSummary["viewSummary [21-65] (function)"]
    ui_js_updateSummary["updateSummary [67-90] (function)"]
    ui_js_updateDisplay["updateDisplay [123-139] (function)"]
    ui_js_showBookmarkInfo["showBookmarkInfo [719-727] (function)"]
    data_js_global>"data.js (global) (global)"]
    index_mjs_global>"index.mjs (global) (global)"]
    ui_js_global>"ui.js (global) (global)"]

    %% Connections
    data_js_global --> data_js_loadBookmarks
    index_mjs_global --> index_mjs_showLoadingScreen
    index_mjs_global --> data_js_loadBookmarks
    index_mjs_global --> index_mjs_main
    index_mjs_global --> data_js_displayScrapJson
    ui_js_global --> ui_js_stopCurrentAnimation
    ui_js_global --> ui_js_viewSummary
    ui_js_global --> data_js_formatTableData
    ui_js_global --> ui_js_updateDisplay
    ui_js_global --> data_js_reloadBookmarks
    ui_js_global --> ui_js_updateSummary
    ui_js_global --> data_js_searchBookmarks
    ui_js_global --> ui_js_showBookmarkInfo

    %% Styling
    classDef functionClass fill:#e1f5fe,stroke:#01579b,stroke-width:2px
    classDef methodClass fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
    classDef classClass fill:#fff3e0,stroke:#e65100,stroke-width:2px
    classDef vueMethodClass fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px
    classDef globalClass fill:#ffebee,stroke:#c62828,stroke-width:2px
    class data_js_loadBookmarks,data_js_formatTableData,data_js_reloadBookmarks,data_js_searchBookmarks,data_js_displayScrapJson,index_mjs_showLoadingScreen,index_mjs_main,ui_js_stopCurrentAnimation,ui_js_viewSummary,ui_js_updateSummary,ui_js_updateDisplay,ui_js_showBookmarkInfo functionClass
    class data_js_global,index_mjs_global,ui_js_global globalClass

the diagram clearly shows the three-tier architecture: data layer (blue functions), UI layer (blue functions), and main entry point, with the red global nodes showing module boundaries.

usage

npx code-network-gen --path <directory> [-o output_name] [-f format]
# or locally: node index.js --path <directory> [-o output_name] [-f format]

options

• --path - directory to analyze (required)
• -o - output file prefix (optional, outputs to console if omitted)
• -f, --format - output format: csv (default), gexf (for Gephi), graphml (for yEd, Cytoscape), dot (for Graphviz), or mermaid (for GitHub, Notion, etc.)
• --include-deps - parse import/require statements to track actual dependency usage

examples

analyze current directory:

npx code-network-gen --path .

analyze with csv output:

npx code-network-gen --path ./src -o my_project
# creates: my_project_nodes.csv, my_project_edges.csv

analyze with gexf output for gephi:

npx code-network-gen --path ./src -o my_project --format gexf
# creates: my_project.gexf (ready to open in Gephi)

analyze with graphml output for yed/cytoscape:

npx code-network-gen --path ./src -o my_project --format graphml
# creates: my_project.graphml (ready to open in yEd, Cytoscape, etc.)

analyze with dot output for graphviz:

npx code-network-gen --path ./src -o my_project --format dot
# creates: my_project.dot (ready for Graphviz tools)

analyze with mermaid output for documentation:

npx code-network-gen --path ./src -o my_project --format mermaid
# creates: my_project.mmd (ready to paste into GitHub, Notion, Obsidian, etc.)

include package.json dependencies in analysis:

npx code-network-gen --path . --include-deps -o my_project
# tracks actual import/require statements to show real dependency usage
# creates edges like: data.js:global -> package.json:axios (imports)

what it finds

• function declarations
• arrow functions
• class methods
• vue component methods
• function calls and their relationships

supports: .js, .jsx, .ts, .tsx, .vue

output formats

csv format (default)

nodes.csv: functions and methods

id,label,type,lines
src/utils.js:formatDate,formatDate,function,[15-22]

edges.csv: function call relationships

source,target,type
src/app.js:global,src/utils.js:formatDate,calls

gexf format (for gephi)

output.gexf: complete network in xml format

• nodes with id, label, type, and lines attributes
• edges with source, target, and type attributes
• ready to import directly into gephi
• includes proper xml schema and metadata

graphml format (for yed, cytoscape)

output.graphml: universal graph format in xml

• nodes with id, label, type, and lines attributes
• edges with source, target, and type attributes
• compatible with yEd, Cytoscape, and other graph tools
• follows GraphML specification with proper key definitions

dot format (for graphviz)

output.dot: graphviz dot format

• nodes with labels, types, and color coding
• edges with different styles based on relationship types
• compatible with dot, neato, fdp, circo, twopi, sfdp
• ready for rendering with Graphviz tools

mermaid format (for documentation)

output.mmd: mermaid flowchart format

• intelligent filtering to keep diagrams readable (max 50 nodes)
• different node shapes for functions, methods, classes, vue-methods
• color-coded styling for different node types
• ready to paste into GitHub markdown, Notion, Obsidian, etc.
• renders natively in many documentation platforms

development

git clone <repo>
npm install
npm test  # runs meta-analysis (tool analyzes itself)
npm run lint

import into tools

gephi:

• gexf: file → open → select the .gexf file (recommended)
• csv: file → import → choose nodes csv, then edges csv

yed: file → open → select the .graphml file (recommended)

cytoscape:

• graphml: file → import → network from file → select .graphml file
• csv: file → import → network from table → select both csv files
  d3/observable: d3.csv() both csv files, standard network format
  python networkx:
• gexf: nx.read_gexf('file.gexf')
• graphml: nx.read_graphml('file.graphml')
• csv: pandas.read_csv() then nx.from_pandas_edgelist()

r igraph:

• gexf: read_graph('file.gexf', format='gexf')
• graphml: read_graph('file.graphml', format='graphml')
• csv: read.csv() then graph_from_data_frame()

mermaid/documentation platforms:

• github: paste .mmd content into markdown files with ```mermaid blocks
• notion: paste as mermaid diagram block
• obsidian: paste with ```mermaid code block
• gitbook: paste as mermaid diagram
• confluence: use mermaid macro with .mmd content

how it works

1. walks directory tree
2. parses ast with acorn
3. extracts function definitions and calls
4. outputs network graph as csv

that's it.