Add interactive CodeCanvas diagram for activitywatch

[Abdulnaser97]

I was trying to understand how activitywatch works under the hood so I created a diagram for it using code-canvas.com. I think it will be pretty helpful for contributors to quickly onboard to the inner-works of activitywatch.

Here is the generated diagram for activitywatch grouped by the application's use-cases and their runtime data flows: Open activitywatch's interactive diagram

I built code canvas to simulate a senior engineer who have been working on activitywatch's codebase for pretty long and can explain to you any functionality of the repository visually through diagrams.

Here is what users are saying about codecanvas

"I used to spend 4 hours asking GPT how a use case in a codebase works and I keep going back and forth until I am able to draw a diagram to summarize my understanding, CodeCanvas gives me that diagram in 40 seconds"

---

Some Notes:

• The diagram is already generated for activitywatch, completely free, no monthly subscription. Consider it as my contribution to help fellow contributors lower their context onboarding friction before they can start contributing.
• Read the 1 pager guide to learn how to refine simulations to capture specific codebase logics you might want to cover.
• I am aware the mapping to the source code is shiften a couple lines off in some cases, I am working on fixing the bug asap.
• You can reach me out anytime on discord discord.gg/t3ezMyMPqr

---

[!IMPORTANT] Adds a link to an interactive CodeCanvas diagram in README.md for better understanding of the activitywatch codebase.

• Documentation:
  • Adds a section in README.md linking to an interactive CodeCanvas diagram for activitywatch.
  • Diagram provides a visual walkthrough of the codebase, aiding in contributor onboarding.
  • Diagram is hosted externally and is free to use.

^{This description was created by for 7d1ac0fe5590a488696e680465488d425751ce37. You can customize this summary. It will automatically update as commits are pushed.}

[LarsArtmann]

I like the idea of offering Code Graphs, but how can we ensure this stays up-to-date?

[Abdulnaser97]

• I am working on a github action script that runs on each PR and updates the parts of the diagram that are linked to source code that was changed in that pull request, will probably need ~2 weeks to finish it, will reach out then.
  • Right now the version I have regenerates the entire diagram at each PR, but that is becoming costly especially if using expensive AI models.
• The current solution for now is this: When we notice that the diagram is becoming obsolete, just hit the "Refine Simulation" button then "Generate" then "Save". it will regenerate the simulation with the new source code.

From my experience however, it takes pretty long time before the diagram starts to become obsolete (obviously depends on each repo).

[ErikBjare]

Code Canvas looks cool!

We could link to it from the README or docs in some suitable section, but I am not going to merge a 10,000 line messy file into this clean bundle repo.

[Abdulnaser97]

Ok makes sense, I just don't want to host the diagram on some database you don't own, so that you guys have control over the diagram in the future.

Here's what I propose instead while you're not familiar with CodeCanvas:

• I gave you collaborator access to my forked version of acitivityWatch (called activityWatch-CodeCanvas) where the diagram is current stored
• I will transfer repo ownership to you once you are comfortable with using and maintaing the diagram (or right now if you prefer)
• I updated the README to point to the forked repo's master branch and removed the diagram file from this PR

Finally, I invite you to join the CodeCanvas discord server if you have any questions (and any feedback, for e.g. were you able to go through a full simulation on CodeCanvas?). https://discord.gg/t3ezMyMPqr

[Abdulnaser97]

Ok makes sense, I just don't want to host the diagram on some database you don't own, so that you guys have control over the diagram in the future.

Here's what I propose instead while you're not familiar with CodeCanvas:

• I gave you collaborator access to my forked version of acitivityWatch (called activityWatch-CodeCanvas) where the diagram is current stored
• I will transfer repo ownership to you once you are comfortable with using and maintaing the diagram (or right now if you prefer)
• I updated the README to point to the forked repo's master branch and removed the diagram file from this PR

Finally, I invite you to join the CodeCanvas discord server if you have any questions (and any feedback, for e.g. were you able to go through a full simulation on CodeCanvas?). https://discord.gg/t3ezMyMPqr

Hi @ErikBjare and @LarsArtmann, floating this PR.

P.S. I am actually using activityWatch's codecanvas as an example for how it makes it easier to understand data flows across the different repos.