Merge pull request #32 from RohanAdwankar/codemaps

Codemaps

Author: RohanAdwankar

Cargo.lock

@@ -32,7 +32,11 @@ clap = { version = "4.5", features = ["derive"] }
 axum = { version = "0.7", features = ["json"], optional = true }
 dialoguer = "0.11"
 serde = { version = "1", features = ["derive"] }
-serde_json = "1"
+serde_json = "1.0"
+thiserror = "1.0"
+walkdir = "2.4"
+directories = "5.0"
+
 tokio = { version = "1", features = [
 	"macros",
 	"rt-multi-thread",
@@ -45,19 +49,15 @@ tower = { version = "0.5", optional = true }
 resvg = { version = "0.43", features = ["text"] }
 tiny-skia = { version = "0.11", features = ["png"], default-features = false }
 base64 = "0.22"
+reqwest = { version = "0.11", features = ["json"] }
+regex = "1.12.2"
 
-[features]
-default = ["server"]
-server = ["axum", "tokio", "tower-http", "tower"]
+[target.'cfg(not(target_arch = "wasm32"))'.dev-dependencies]
+assert_cmd = "2.1.1"
 
 [dev-dependencies]
 wasm-bindgen-test = "0.3"
 
-[target.'cfg(not(target_arch = "wasm32"))'.dev-dependencies]
-assert_cmd = { version = "2", default-features = false }
-predicates = "3"
-tempfile = "3"
-
-[profile.release]
-codegen-units = 1
-lto = true
+[features]
+default = ["server"]
+server = ["axum", "tokio", "tower-http", "tower"]

Cargo.toml

@@ -4,9 +4,10 @@ https://github.com/user-attachments/assets/de5222bb-9b65-43cf-a35b-5613d06343e8
 ## Overview
 
 The goal of `oxdraw` is to make it easy to create and maintain high-quality diagrams using a declarative and reproducible syntax.
-Charts are written in [Mermaid](https://mermaid.js.org/) syntax, while a web interface allows users to fine-tune positions connector paths, colors, and other styling components. Whenever a diagram is tweaked visually, the structural changes are persisted back to the source file as declarative code so that everything remains deterministic and versionable.
+Charts are written in [Mermaid](https://mermaid.js.org/) syntax, while a web interface allows users to fine-tune positions, connector paths, colors, and other styling components. Whenever a diagram is tweaked visually, the structural changes are persisted back to the source file as declarative code so that everything remains deterministic and versionable.
+Aside from the normal diagrams, oxdraw can also embed images directly into the diagrams and view codemaps of codebase where nodes are linked to codesegments.
 The changes are saved as comments in the mermaid file so it remains compatible with other Mermaid tools.
-The repo is composed of the Rust CLI to compile `.mmd` files into images and the React based web interface to editing the files.
+The repo is composed of the Rust CLI to compile `.mmd` files into images, a React based web interface to editing the files, and some AI and static analysis algorithm options for automatic generation of code maps.
 
 ## Vision
 
@@ -32,6 +33,17 @@ oxdraw --input flow.mmd
 oxdraw --input flow.mmd --edit
 ```
 
+### Have AI generate a codemap for the repo you're in 
+This will also launch the interactive viewer mapping the nodes to files in the repo. You can refer to [ai.md](docs/ai.md) for free resources on setting up AI access
+
+https://github.com/user-attachments/assets/49891bec-7bcd-4af4-a357-d59708bb1812
+
+```bash
+oxdraw --code-map ./ --gemini YOUR_API_KEY
+# or if you don't have AI access set up, you can use this simple static analysis based code map generator to get an idea of the feature:
+oxdraw --code-map ./src/diagram.rs --no-ai --output test.png
+```
+
 ## Features
 
 ### CLI Flags
@@ -48,6 +60,12 @@ oxdraw --input flow.mmd --edit
 | `-b, --background-color <COLOR>` | Background fill passed to the renderer (currently SVG only). Applies to both one-off renders and the editor preview. |
 | `-q, --quiet` | Suppress informational stdout such as the success message after rendering to disk. |
 | `-n, --new` | Create new mermaid file and serves for editing. |
+| `--code-map <PATH>` | Generate a code map from the given codebase path. |
+| `--api-key <KEY>` | API Key for the LLM (optional, defaults to environment variable if not set). |
+| `--model <MODEL>` | Model to use for code map generation. |
+| `--api-url <URL>` | API URL for the LLM. |
+| `--regen` | Force regeneration of the code map even if a cache exists. |
+| `--prompt <PROMPT>` | Custom prompt to append to the LLM instructions. |
 
 ### Frontend Features
 
@@ -70,7 +88,7 @@ oxdraw --input flow.mmd --edit
 - The source panel mirrors the Mermaid file, auto-saves after short idle periods, and surfaces pending/saving/error states alongside the current selection.
 - Status text in the top toolbar signals loading, saving, and the currently edited file path.
 
-## The Diagram Algorithm
+### The Diagram Algorithm
 
 https://github.com/user-attachments/assets/4430147a-83d8-4d83-aca6-7beec197c0e3
 

README.md

@@ -1,9 +1,9 @@
-use std::env;
-use std::path::Path;
-
 fn main() {
     #[cfg(feature = "server")]
     {
+        use std::env;
+        use std::path::Path;
+
         println!("cargo:rerun-if-changed=frontend/out");
 
         let manifest_dir = env::var("CARGO_MANIFEST_DIR").expect("CARGO_MANIFEST_DIR missing");

build.rs

@@ -0,0 +1,13 @@
+One example of a way to get LLM Access for free is Google AI Studio.
+Here is the steps to set it up:
+1. Go to [Google AI Studio](https://aistudio.google.com/api-keys) and sign in with your Google account.
+2. Click on "Create API Key" and "Create Project" and copy the generated API key (the names don't matter).
+3. Paste the API key into the `oxdraw --code-map ./ --gemini YOUR_API_KEY` flag when running the code map generation command.
+
+This process is fairly straightforward and doesn't require any billing information.
+
+The other default option (which [I used](https://github.com/RohanAdwankar/cgpu?tab=readme-ov-file#serve-gemini-for-free-as-openai-compatible-api) during development) is to serve local inference on this url http://localhost:8080/v1/responses
+
+The response format should be compatible with OpenAI's responses API.
+
+For an explanation of how the AI codemap generation works check out the [codemap!](docs/ai_codemap_generation.mmd)

docs/ai.md

@@ -0,0 +1,34 @@
+graph TD
+    Start[generate_code_map] --> CheckCache{Cached?}
+    CheckCache -- Yes --> ReturnCached[Return Cached Map]
+    CheckCache -- No --> Scan[Scan Codebase]
+    Scan --> BuildPrompt[Build Initial Prompt]
+    BuildPrompt --> LoopStart((Loop Start))
+    LoopStart --> CheckAttempts{Max Attempts?}
+    CheckAttempts -- Yes --> Error[Return Error]
+    CheckAttempts -- No --> CallLLM[Call LLM API]
+    CallLLM --> Parse{Parse JSON?}
+    Parse -- Success --> Validate{Validate Map?}
+    Parse -- Failure --> UpdatePrompt1[Append Parse Error]
+    UpdatePrompt1 --> LoopStart
+    Validate -- Valid --> SaveCache[Save to Cache]
+    Validate -- Invalid --> UpdatePrompt2[Append Validation Error]
+    UpdatePrompt2 --> LoopStart
+    SaveCache --> ReturnNew[Return New Map]
+
+%% OXDRAW CODE Start src/codemap.rs def:generate_code_map
+%% OXDRAW CODE CheckCache src/codemap.rs line:69-80
+%% OXDRAW CODE Scan src/codemap.rs def:scan_codebase
+%% OXDRAW CODE BuildPrompt src/codemap.rs line:106-144
+%% OXDRAW CODE LoopStart src/codemap.rs line:172-173
+%% OXDRAW CODE Error src/codemap.rs line:175-175
+%% OXDRAW CODE CheckAttempts src/codemap.rs line:169-171
+%% OXDRAW CODE CallLLM src/codemap.rs line:177-199
+%% OXDRAW CODE Parse src/codemap.rs line:206-259
+%% OXDRAW CODE Validate src/codemap.rs def:validate_response
+%% OXDRAW CODE SaveCache src/codemap.rs line:279-287
+%% OXDRAW CODE UpdatePrompt1 src/codemap.rs line:256-257
+%% OXDRAW CODE UpdatePrompt2 src/codemap.rs line:294-297
+%% OXDRAW CODE ReturnCached src/codemap.rs line:77-77
+%% OXDRAW CODE ReturnNew src/codemap.rs line:291-291
+%% OXDRAW META path: commit:93e6d002b6aaec11cd30e7bd362e12047534db2c diff_hash:13646096770106105413

docs/codemap_generation.mmd

@@ -33,8 +33,9 @@ body > div:first-of-type {
 .app {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  height: 100vh;
   background: linear-gradient(180deg, #edf2f7 0%, #e2e8f0 100%);
+  overflow: hidden;
 }
 
 .toolbar {
@@ -89,6 +90,7 @@ body > div:first-of-type {
   background: linear-gradient(180deg, #edf2f7 0%, #e2e8f0 100%);
   border-top: 1px solid rgba(15, 23, 42, 0.08);
   gap: 0;
+  overflow: hidden;
 }
 
 .diagram-wrapper {
@@ -553,6 +555,12 @@ body > div:first-of-type {
   outline: none;
 }
 
+.context-menu-separator {
+  height: 1px;
+  background: rgba(248, 250, 252, 0.15);
+  margin: 0.25rem 0;
+}
+
 .alignment-guide {
   stroke: rgba(56, 178, 172, 0.85);
   stroke-width: 1.5;
@@ -563,3 +571,101 @@ body > div:first-of-type {
 .alignment-guide-center {
   stroke: rgba(244, 114, 182, 0.85);
 }
+
+.code-panel {
+  width: 500px;
+  max-width: 50%;
+  display: flex;
+  flex-direction: column;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(6px);
+  border-left: 1px solid rgba(15, 23, 42, 0.08);
+  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
+  height: 100%;
+  overflow: hidden;
+}
+
+.code-panel.empty {
+  align-items: center;
+  justify-content: center;
+}
+
+.code-panel .panel-header {
+  padding: 0.9rem 1.1rem 0.4rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.35rem;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+}
+
+.code-panel .panel-title {
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #64748b;
+  font-weight: 700;
+}
+
+.code-panel .panel-path {
+  font-size: 0.9rem;
+  color: #1f2937;
+  font-weight: 600;
+  word-break: break-all;
+  flex: 1;
+  margin-left: 1rem;
+}
+
+.code-panel .close-button {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  color: #64748b;
+  padding: 0;
+}
+
+.code-panel .close-button:hover {
+  color: #1f2937;
+}
+
+.code-content {
+  flex: 1;
+  overflow: auto;
+  padding: 1rem;
+  background: #f8fafc;
+  color: #1f2937;
+}
+
+.code-content pre {
+  margin: 0;
+}
+
+.code-content code {
+  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.85rem;
+  line-height: 1.5;
+  display: block;
+}
+
+.code-line {
+  display: flex;
+  gap: 1rem;
+}
+
+.code-line.highlighted {
+  background-color: rgba(253, 230, 138, 0.5);
+}
+
+.line-number {
+  color: #94a3b8;
+  user-select: none;
+  text-align: right;
+  min-width: 2rem;
+}
+
+.line-text {
+  white-space: pre-wrap;
+  word-break: break-all;
+}