https://github.com/cloudydeno/module-visualizer

Interactive tools to explore ESM dependencies for any module which uses 'import' statements with URLs.
https://github.com/cloudydeno/module-visualizer

deno graphviz-dot svg

Last synced: 2 months ago
JSON representation

Interactive tools to explore ESM dependencies for any module which uses 'import' statements with URLs.

• Host: GitHub
• URL: https://github.com/cloudydeno/module-visualizer
• Owner: cloudydeno
• License: mit
• Created: 2021-01-31T16:29:10.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-15T09:45:29.000Z (4 months ago)
• Last Synced: 2024-11-12T12:47:39.949Z (3 months ago)
• Topics: deno, graphviz-dot, svg
• Language: TypeScript
• Homepage: https://deno-visualizer.danopia.net/
• Size: 396 KB
• Stars: 42
• Watchers: 3
• Forks: 2
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-starred - cloudydeno/module-visualizer - Interactive tools to explore ESM dependencies for any module which uses 'import' statements with URLs. (deno)

README

        
# Deno Module Visualizer

Live @ https://deno-visualizer.danopia.net

This tool shows a Graphviz rendering of high-level module dependencies.

## CLI Usage

```sh

$ deno install -f -n deno-graph --allow-run=deno,dot https://raw.githubusercontent.com/cloudydeno/module-visualizer/main/feat/dependencies-of/cli.ts

✅ Successfully installed deno-graph

$ deno-graph https://deno.land/x/[email protected]/mod.ts

digraph "imported modules" {

  rankdir="TB";

  "https://deno.land/x/[email protected]"[shape="box",label="/x/[email protected]\l4 files, 9 KB\l",penwidth="1.6931471805599454",fontname="Arial",style="filled",tooltip="https://deno.land/x/[email protected]",fillcolor="lightskyblue",href="https://deno.land/x/[email protected]"];

  "https://deno.land/x/[email protected]" -> "https://deno.land/[email protected]";

  "https://deno.land/[email protected]"[shape="box",label="/[email protected]\l    • /encoding\l2 files, 3 KB\l",penwidth="1",fontname="Arial",style="filled",tooltip="https://deno.land/[email protected]",fillcolor="lightgreen",href="https://deno.land/[email protected]"];

}

```

## `/dependencies-of/`

The implementation was initially represented by this shell pipeline:

```sh

deno info --unstable --json -- "$moduleUrl" \

| deno run -- compute.ts "$options" \

| dot -T"svg"

```

Several output types are available.

HTML and SVG renderings are the intended way of viewing the graph.

In addition, the dot process can be removed to export raw JSON data from the computation phase.

These are available as hyperlinks from the HTML output.

> Note: Over time, the above pipeline is being consolidated into a Deno-native module.

> * `deno info` will be replaced with `/x/deno_graph` when Deno WASM is more mature and graph loading performance is comparable.

> * `deno run` has been removed already (the JSON is processed in the main process now).

> * `dot -Tsvg` might eventually be replaced with a WebAssembly build of GraphViz :) Font measuring will be a tricky point with that.

## Deploy

These are just notes for me :)

```sh

IMAGE="gcr.io/stardust-156404/deno-module-visualizer:$TAG"

docker build . -t $IMAGE

docker push $IMAGE

gcloud alpha run services update deno-module-visualizer --platform=managed --project=stardust-156404 --region=us-central1 --image=$IMAGE

# or

# update tag in cloud-run.yaml

gcloud alpha run services replace cloud-run.yaml --platform=managed --project=stardust-156404 --region=us-central1

```