joe/notfiles
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(notgraph): replace vis.js with Mermaid for clean static flowchart

Browse Source
This commit is contained in:
Joseph O'Brien
2026-04-02 03:50:53 -04:00
parent a2dcb123e8
commit f5b0dd87f8
2 changed files with 23 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
crates/notgraph/src/emit.rs
View File

@@ -111,46 +111,26 @@ fn write_markdown(dir: &Path, stats: &GraphStats, symbol_tables: &[SymbolTable])
} }
fn write_html(dir: &Path, crate_graph: &CrateGraph, stats: &GraphStats) -> Result<()> { fn write_html(dir: &Path, crate_graph: &CrateGraph, stats: &GraphStats) -> Result<()> {
// Build node id map from name -> index
let name_to_id: std::collections::HashMap<&str, usize> = crate_graph
.nodes
.iter()
.enumerate()
.map(|(i, n)| (n.as_str(), i))
.collect();
let fan_map: std::collections::HashMap<&str, (usize, usize)> = stats let fan_map: std::collections::HashMap<&str, (usize, usize)> = stats
.crate_graph .crate_graph
.iter() .iter()
.map(|fs| (fs.name.as_str(), (fs.fan_in, fs.fan_out))) .map(|fs| (fs.name.as_str(), (fs.fan_in, fs.fan_out)))
.collect(); .collect();
let nodes_js: String = crate_graph // Mermaid flowchart: dependency -> dependent (LR)
.nodes let mut mermaid = String::from("flowchart LR\n");
.iter() for node in &crate_graph.nodes {
.enumerate() let (fi, fo) = fan_map.get(node.as_str()).copied().unwrap_or((0, 0));
.map(|(i, n)| { mermaid.push_str(&format!(
let (fi, fo) = fan_map.get(n.as_str()).copied().unwrap_or((0, 0)); " {}[\"{}<br/>in:{} out:{}\"]\n",
format!( node, node, fi, fo
"{{id:{},label:{:?},title:'fan-in:{} fan-out:{}'}}", ));
i, n, fi, fo }
) for (from, to) in &crate_graph.edges {
}) // dependency -> dependent
.collect::<Vec<_>>() mermaid.push_str(&format!(" {} --> {}\n", to, from));
.join(","); }
let graph_diagram = mermaid;
let edges_js: String = crate_graph
.edges
.iter()
.enumerate()
.filter_map(|(i, (from, to))| {
// Reverse direction: dependency -> dependent ("I am used by")
let from_id = name_to_id.get(to.as_str())?;
let to_id = name_to_id.get(from.as_str())?;
Some(format!("{{id:{},from:{},to:{}}}", i, from_id, to_id))
})
.collect::<Vec<_>>()
.join(",");
let cycle_html = if stats.cycles.is_empty() { let cycle_html = if stats.cycles.is_empty() {
"<p>No cycles detected.</p>".to_string() "<p>No cycles detected.</p>".to_string()
@@ -177,8 +157,7 @@ fn write_html(dir: &Path, crate_graph: &CrateGraph, stats: &GraphStats) -> Resul
let html = format!( let html = format!(
include_str!("../templates/report.html.template"), include_str!("../templates/report.html.template"),
nodes_js = nodes_js, graph_diagram = graph_diagram,
edges_js = edges_js,
hotspot_rows = hotspot_rows, hotspot_rows = hotspot_rows,
cycle_html = cycle_html, cycle_html = cycle_html,
); );

27
crates/notgraph/templates/report.html.template
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>notgraph Report</title> <title>notgraph Report</title>
<script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script> <script src="https://unpkg.com/mermaid@11/dist/mermaid.min.js"></script>
<style> <style>
:root {{ :root {{
--bg: #1a1a1a; --bg: #1a1a1a;
@@ -11,18 +11,14 @@
--bg3: #2e2e2e; --bg3: #2e2e2e;
--border: #3a3a3a; --border: #3a3a3a;
--text: #e0e0e0; --text: #e0e0e0;
--text-dim: #888;
--accent: #4a9eff; --accent: #4a9eff;
--accent2: #2a5fa0;
--node-bg: #1e3a5f;
--node-border: #4a9eff;
--heading-border: #4a9eff; --heading-border: #4a9eff;
}} }}
* {{ box-sizing: border-box; }} * {{ box-sizing: border-box; }}
body {{ font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 2rem; max-width: 1200px; }} body {{ font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 2rem; max-width: 1200px; }}
h1 {{ color: var(--accent); margin-bottom: 0.5rem; }} h1 {{ color: var(--accent); margin-bottom: 0.5rem; }}
h2 {{ border-bottom: 2px solid var(--heading-border); padding-bottom: 0.3rem; color: var(--text); margin-top: 2rem; }} h2 {{ border-bottom: 2px solid var(--heading-border); padding-bottom: 0.3rem; color: var(--text); margin-top: 2rem; }}
#graph {{ height: 480px; border: 1px solid var(--border); margin-bottom: 2rem; background: var(--bg2); border-radius: 4px; }} .graph-wrap {{ background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 1.5rem; margin-bottom: 2rem; overflow-x: auto; }}
table {{ border-collapse: collapse; width: 100%; margin-bottom: 2rem; }} table {{ border-collapse: collapse; width: 100%; margin-bottom: 2rem; }}
th, td {{ border: 1px solid var(--border); padding: 0.4rem 0.8rem; text-align: left; }} th, td {{ border: 1px solid var(--border); padding: 0.4rem 0.8rem; text-align: left; }}
th {{ background: var(--bg3); cursor: pointer; user-select: none; color: var(--accent); }} th {{ background: var(--bg3); cursor: pointer; user-select: none; color: var(--accent); }}
@@ -30,24 +26,16 @@
td {{ background: var(--bg2); }} td {{ background: var(--bg2); }}
tr:hover td {{ background: var(--bg3); }} tr:hover td {{ background: var(--bg3); }}
p {{ color: var(--text); }} p {{ color: var(--text); }}
.ok {{ color: #4caf50; }}
.cycle {{ color: #f44336; }}
</style> </style>
</head> </head>
<body> <body>
<h1>notgraph Report</h1> <h1>notgraph Report</h1>
<h2>Crate Dependency Graph</h2> <h2>Crate Dependency Graph</h2>
<div id="graph"></div> <div class="graph-wrap">
<script> <pre class="mermaid">
const nodes = new vis.DataSet([{nodes_js}]); %%{{init: {{'theme':'dark','themeVariables':{{'darkMode':true,'background':'#242424','primaryColor':'#1e3a5f','primaryBorderColor':'#4a9eff','primaryTextColor':'#e0e0e0','lineColor':'#4a9eff','edgeLabelBackground':'#242424'}}}}}}%%
const edges = new vis.DataSet([{edges_js}]); {graph_diagram}</pre>
new vis.Network(document.getElementById('graph'), {{nodes, edges}}, {{ </div>
layout: {{ hierarchical: {{ direction: 'LR', sortMethod: 'directed', levelSeparation: 180 }} }},
physics: false,
edges: {{ arrows: {{ to: {{ enabled: true, scaleFactor: 0.8 }} }}, color: {{ color: '#4a9eff', opacity: 0.8 }}, smooth: {{ type: 'cubicBezier' }} }},
nodes: {{ shape: 'box', font: {{ color: '#e0e0e0', size: 14 }}, color: {{ background: '#1e3a5f', border: '#4a9eff', highlight: {{ background: '#2a5fa0', border: '#7bbfff' }} }}, margin: 8 }}
}});
</script>
<h2>Hotspots</h2> <h2>Hotspots</h2>
<table id="hotspots"> <table id="hotspots">
<thead><tr> <thead><tr>
@@ -60,6 +48,7 @@ new vis.Network(document.getElementById('graph'), {{nodes, edges}}, {{
<h2>Cycle Report</h2> <h2>Cycle Report</h2>
{cycle_html} {cycle_html}
<script> <script>
mermaid.initialize({{ startOnLoad: true }});
function sortTable(id, col, th) {{ function sortTable(id, col, th) {{
const t = document.getElementById(id); const t = document.getElementById(id);
const asc = th.dataset.dir !== 'asc'; const asc = th.dataset.dir !== 'asc';