{"id":13571480,"url":"https://github.com/emad-elsaid/rubrowser","last_synced_at":"2025-05-15T07:05:01.513Z","repository":{"id":10620869,"uuid":"66382841","full_name":"emad-elsaid/rubrowser","owner":"emad-elsaid","description":"a ruby code dependency graph interactive visualizer","archived":false,"fork":false,"pushed_at":"2023-08-19T01:10:49.000Z","size":581,"stargazers_count":642,"open_issues_count":2,"forks_count":29,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-04-15T00:51:39.419Z","etag":null,"topics":["graph","ruby","visualizer"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/emad-elsaid.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"MIT-LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2016-08-23T16:11:54.000Z","updated_at":"2025-01-24T13:36:55.000Z","dependencies_parsed_at":"2024-04-11T23:02:05.938Z","dependency_job_id":null,"html_url":"https://github.com/emad-elsaid/rubrowser","commit_stats":null,"previous_names":["blazeeboy/rubrowser"],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emad-elsaid%2Frubrowser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emad-elsaid%2Frubrowser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emad-elsaid%2Frubrowser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emad-elsaid%2Frubrowser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emad-elsaid","download_url":"https://codeload.github.com/emad-elsaid/rubrowser/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254292040,"owners_count":22046426,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graph","ruby","visualizer"],"created_at":"2024-08-01T14:01:02.375Z","updated_at":"2025-05-15T07:04:56.499Z","avatar_url":"https://github.com/emad-elsaid.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Rubrowser (Ruby Browser)\n\n[![Gem Version](https://badge.fury.io/rb/rubrowser.svg)](https://badge.fury.io/rb/rubrowser)\n[![Build Status](https://travis-ci.org/emad-elsaid/rubrowser.svg?branch=master)](https://travis-ci.org/emad-elsaid/rubrowser)\n\n\na visualizer for ruby code (rails or otherwise), it analyze your code and\nextract the modules definitions and used classes/modules and render all these\ninformation as a directed force graph using D3.\n\n### Note:\n\nStarting from version 2.0.0 the project is no longer an http server, it\ngenerates one HTML file that is self-contained, data and script and html in one\nfile, so you can generate it in your CI build and publish it as part of your\ndocumentation\n\nthis project is so small that the visualization looks like so\n\n![rubrowser visualization](https://i.imgur.com/zKjc7G5.png)\n\nthe idea is that the project opens every `.rb` file and parse it with `parser`\ngem then list all modules and classes definitions, and all constants that are\nlisted inside this module/class and link them together.\n\nHere are some output examples\n\n| Gem                   | Visualization                                 |\n| -------------         | :-------------:                               |\n| rack-1.6.4/lib        | ![rake](http://i.imgur.com/4UsCo0a.png)       |\n| actioncable-5.0.0/lib | ![acioncable](http://i.imgur.com/Q0Xqjsz.png) |\n| railties-5.0.0/lib    | ![railties](http://i.imgur.com/31g10a1.png)   |\n\nthere are couple things you need to keep in mind:\n\n* if your file doesn't have a valid ruby syntax it won't be parsed and will\n  print warning.\n* if you reference a class that is not defined in your project it won't be in\n  the graph, we only display the graph of classes/modules you defined\n* it statically analyze the code so meta programming is out of question in here\n* rails associations are meta programming so forget it :smile:\n\n## Installation\n\n\n```\ngem install rubrowser\n```\n\n## Usage\n\n\n```\nUsage: rubrowser [options] [file] ...\n    -o, --output=FILE                output file page, if not specified output will be written to stdout\n    -l, --layout=FILE                layout file to apply on the resulting graph\n    -s, --server=SERVER:PORT         rubrowser server for execution monitoring\n    -T, --no-toolbox                 Don't display toolbox on the page\n    -j, --json                       Do export data as JSON instead of HTML\n    -v, --version                    Print Rubrowser version\n    -h, --help                       Prints this help\n```\n\nif you run it without any options\n```\nrubrowser\n```\n\nit'll analyze the current directory and print out an HTML file, so you can write\nit to a file, and open it in your browser\n\n```\nrubrowser \u003e output.html\n```\n\n## Monitoring your application execution\n\nAdd rubrowser to your ruby project `Gemfile`\n```\ngem 'rubrowser'\n```\n\nAdd the following code before your application runs, if it's a rails project\nthis should be an initializer\n\n```\nRubrowser::Monitor.run(path: Rails.root.to_s, port: 8080)\n```\n\npath is your code path, and port is the execution websocket server port, the\nserver will open that port and announce any execution happens to the code inside\nyour project directory.\n\nnow generate a rubrowser HTML output that connect to your server\n\n```\nrubrowser -slocalhost:8080 \u003e output.html\n```\n\n## Using a saved layout\n\nWhen you move classes/modules in the graph to fix them in one place, then you\nrefresh the page, you'll reset the graph again.\n\nfor that reason there is a button to download the current graph state as json file (fixed\nnodes positions), when you generate the graph again you can pass that file to\nrubrowser to embed it inside the output HTML file.\n\n```\nrubrowser -l layout.json\n```\n\nI recommend putting that file in your project and name it `.rubrowser` in that\ncase it'll be easy to use it whenever you generate the graph.\n\n```\nrubrowser -l .rubrowser\n```\n\nSo that in the future probably rubrowser can pick the file automatically, if you\nfollow that naming, your project will be ready in that case.\n\n## Export data for use in external tools\n\n```\nrubrowser -j|jq '.'\n```\n\n\n## Features\n\n* trace your execution in realtime on the graph\n* interactive graph, you can pull any node to fix it to some position\n* to release node double click on it\n* zoom and pan with mouse or touch pad\n* highlight node and all related nodes, it'll make it easier for you to see what\n  depends and dependencies of certain class\n* highlight nodes by names or file path\n* ignore node by name, or file path\n* ignore nodes of certain type (modules/classes)\n* hide namespaces\n* hide relations\n* change graph appearance (collision radius)\n* stop animation immediately\n* fix all nodes in position or release all fixed nodes\n* Module/class circle size on the graph will be relative to module number of\n  lines in your code\n* cyclical dependencies are marked in red\n* after you move nodes around, you can download the layout as a file, then\n  provide it when generating the graph file again with `-l file.json` it will\n  embed the layout in the file and the graph will have the same layout by\n  default.\n\n## Why?\n\nBecause i didn't find a good visualization tool to make me understand ruby\nprojects when I join a new one.\n\nit's great when you want to get into an open source project and visualize the\nstructure to know where to work and the relations between modules/classes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femad-elsaid%2Frubrowser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femad-elsaid%2Frubrowser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femad-elsaid%2Frubrowser/lists"}