Baike.dev
Log in
Back to tool/Back to issues
#289·madge

Graphs are unreadable past 15 dependencies

Author: freganteCreated Jul 17, 2021Updated Jul 25, 2025
Labelsviz

Hi! This is a great tool but I'm struggling to make it useful. Graphs are not a great way to represent dependencies because shared dependencies are pulled so far right and away from their importers, forcing you to follow thousands of pixels of lines.

a

The entry point has 6 direct dependencies, can you spot them in less than 10 seconds? 10 seconds is a long time to spot 6 dependencies.

The solution here is to use the textual output and that cleanly shows you the 6 dependencies… if you only find the entry point in this list in alphabetical order:

auth/token.ts
  ../node_modules/fast-deep-equal/index.js
  ../node_modules/js-cookie/src/js.cookie.js
  ../node_modules/webextension-polyfill-ts/lib/index.js
  chrome.ts
  telemetry/rollbar.ts
background/logging.ts
  ../node_modules/idb/with-async-ittr.js
  ../node_modules/lodash/lodash.js
  ../node_modules/serialize-error/index.js
  ../node_modules/type-fest/index.d.ts
  ../node_modules/uuid/dist/index.js
  ../node_modules/webext-detect-page/index.js
  background/protocol.ts
  background/telemetry.ts
  chrome.ts
  contentScript/connection.ts
  core.ts
  errors.ts
  telemetry/rollbar.ts
  utils/expectContext.ts
background/popup.ts
  ../node_modules/webextension-polyfill-ts/lib/index.js
  background/protocol.ts
  helpers.ts
  utils/expectContext.ts
background/protocol.ts
  ../node_modules/serialize-error/index.js
  ../node_modules/uuid/dist/index.js
  ../node_modules/webext-detect-page/index.js
  ../node_modules/webext-patterns/index.js
  ../node_modules/webext-polyfill-kinda/index.js
  ../node_modules/webextension-polyfill-ts/lib/index.js
  chrome.ts
  messaging/protocol.ts
background/telemetry.ts
  ../node_modules/axios/index.js
  ../node_modules/lodash/lodash.js
  ../node_modules/type-fest/index.d.ts
  ../node_modules/uuid/dist/index.js
  ../node_modules/webextension-polyfill-ts/lib/index.js
  auth/token.ts
  background/protocol.ts
  chrome.ts
  options/loader.ts
  services/baseService.ts
  utils.ts
chrome.ts
  ../node_modules/lodash/isEmpty.js
  ../node_modules/p-defer/index.js
  ../node_modules/p-timeout/index.js
  ../node_modules/webext-detect-page/index.js
  ../node_modules/webextension-polyfill-ts/lib/index.js
  utils/expectContext.ts
components/AsyncButton.tsx
  ../node_modules/react-bootstrap/cjs/Button.js
  ../node_modules/react/index.js
contentScript/backgroundProtocol.ts
  ../node_modules/serialize-error/index.js
  ../node_modules/webext-detect-page/index.js
  ../node_modules/webextension-polyfill-ts/lib/index.js
  errors.ts
  messaging/protocol.ts
  utils/expectContext.ts
contentScript/connection.ts
  contentScript/notify.ts
contentScript/notify.ts
  ../node_modules/lodash/lodash.js
  contentScript/backgroundProtocol.ts
core.ts
  ../node_modules/@rjsf/core/dist/cjs/index.js
  ../node_modules/@types/json-schema/index.d.ts
  ../node_modules/axios/index.js
  ../node_modules/lodash/lodash.js
  ../node_modules/serialize-error/index.js
  ../node_modules/type-fest/index.d.ts
  ../node_modules/webextension-polyfill-ts/lib/index.js
devTools/editor/components/Centered.tsx
  ../node_modules/react-bootstrap/cjs/index.js
  ../node_modules/react/index.js
errors.ts
  ../node_modules/serialize-error/index.js
  core.ts
extensionContext.ts
  ../node_modules/webextension-polyfill-ts/lib/index.js
helpers.ts
  ../node_modules/handlebars/lib/index.js
  ../node_modules/lodash/isPlainObject.js
  ../node_modules/lodash/mapKeys.js
  ../node_modules/lodash/mapValues.js
  ../node_modules/lodash/pickBy.js
  ../node_modules/mustache/mustache.js
  ../node_modules/nunjucks/index.js
  core.ts
  utils.ts
messaging/protocol.ts
  ../node_modules/is-promise/index.js
  ../node_modules/serialize-error/index.js
  ../node_modules/webextension-polyfill-ts/lib/index.js
  core.ts
options/loader.ts
  ../node_modules/type-fest/index.d.ts
  ../node_modules/webextension-polyfill-ts/lib/index.js
  core.ts
permissionsPopup.tsx
  ../node_modules/bootstrap/dist/css/bootstrap.min.css
  ../node_modules/react-dom/index.js
  ../node_modules/react/index.js
  extensionContext.ts
  popups/PermissionsPopup.tsx
  telemetry/rollbar.ts
popups/PermissionsPopup.tsx
  ../node_modules/@fortawesome/free-solid-svg-icons/index.js
  ../node_modules/@fortawesome/react-fontawesome/index.js
  ../node_modules/react-bootstrap/cjs/index.js
  ../node_modules/react/index.js
  ../node_modules/webextension-polyfill-ts/lib/index.js
  components/AsyncButton.tsx
  devTools/editor/components/Centered.tsx
  errors.ts
  telemetry/logging.ts
  utils/permissions.ts
services/baseService.ts
  ../node_modules/lodash/isEmpty.js
  ../node_modules/react/index.js
  ../node_modules/use-async-effect/index.js
  chrome.ts
telemetry/logging.ts
  ../node_modules/serialize-error/index.js
  ../node_modules/webext-detect-page/index.js
  background/logging.ts
  chrome.ts
  core.ts
  telemetry/rollbar.ts
telemetry/rollbar.ts
  ../node_modules/rollbar/src/server/rollbar.js
  background/telemetry.ts
  chrome.ts
utils.ts
  ../node_modules/lodash/lodash.js
  ../node_modules/type-fest/index.d.ts
utils/expectContext.ts
  ../node_modules/webext-detect-page/index.js
utils/permissions.ts
  ../node_modules/lodash/groupBy.js
  ../node_modules/lodash/sortBy.js
  ../node_modules/lodash/uniq.js
  ../node_modules/webextension-polyfill-ts/lib/index.js
  background/popup.ts
  background/protocol.ts

Additionally the list is monodimensional: I can see the 6 dependencies, but then I can't follow them easily.

Source: pahen/madge

View original on GitHubView discussion on GitHub