codecrumbs [active development phase, stay tuned!]

Leave "breadcrumbs" in source code via comments to find your way out from code maze.

Still much work to do, but the basic features are already implemented and are ready to use. Give it a try while I am finishing a few more big features. Ideas and improvements are welcome. Thanks.

Demo

Check out standalone version here with defined trail of codecrumbs.

Get started

Install codecrumbs globally or in devDependencies: yarn add codecrumbs -D

Add command with entry file and source directory to scripts section in your package.json. Change -e (entry point file), -d (directory) params to match paths inside your project.

  // package.json
  ...
  "scripts": {
    "start:cc": "codecrumbs -e src/index.js -d src"
  }

Run yarn start:cc from the terminal. Go to http://localhost:2018/# in the browser to check it out.

Breadcrumbs

Leave breadcrumbs by simply putting a comment in code, diagram wil be updated on the fly!

Write //cc:here is breadcrumb to put a simple breadcrumb in the code. cc (stands for "codecrumb") is the prefix which used by the parser, and here is breadcrumb is a title of our first breadcrumb.

Also, you can create “trail of breadcrumbs” — basically, a sequence of codecrumbs which follow some data flow (e.g. user login, or form submit, etc.). To create a codecrumb as part of a trail you write: //cc:signin#3;enable route where signin is the trail ID, #3 is order number of step, enable route is a title describing the step.

Check out the introduction article here for more details.

Learn and  share your knowledge

So let’s say you put together some trail of codecrumbs describing some important flow inside the project. How you can share it with others? Simply download the json file of codecrumbs store, send it to the friend, he/she uploads it to the codecrumbs and can see same you just saw!

Support

If you like this project and believe it makes sense, please, put a ⭐ or tweet about it - it will show your support and motivate me 👊. Thanks!