Top 8 Types of CodeSee Maps for Teams

In this guide, we've shared a few of our favorite Maps types, along with tips on getting the most out of your Maps.

Top 8 Types of CodeSee Maps for Teams

CodeSee Maps are so much more than just code diagrams. Maps provide developers and teams a means of sharing key information about code—all within the context of the complete codebase.

With features to build customized views of codebases, Maps can be used to guide cross-organization collaboration, drive developer onboarding, improve code reviews, and more. Below, we've shared some of our favorite Maps types, along with some guidance on using Maps Labels, Notes, and Tours to customize your codebase views.

Types of Maps

Getting Started with Contextual Maps

CodeSee Maps have features customizable for each type of Map created. To get the most out of your Map, we suggest the following sequence:

  1. Decide on the type of Map you'll be creating—what value do you want it to provide your team?
  2. Duplicate the auto-generated Map and begin customizing the view based on your use case. Does your use case require you to zoom into an area of the codebase? Would it be helpful to collapse irrelevant files and folders so they don't distract from the knowledge you need to share with teammates?
  3. Use Labels and Colors to designate and color-code files and folders you would like to group. Be intentional with color choices and keep accessibility in mind.
  4. Add Notes to add additional context to any file and folder.
  5. Finally, you can create Tours to offer asynchronous, step-by-step visual walkthroughs of a Map.

Overview Map

CodeSee Overview Map Example
Overview Map Example

An Overview Map shows where different functionalities of a codebase take place, making it a great dedicated resource to reference regularly.

Say you're working on a feature and need to look up how different modules interconnect. Or you want to check if a specific abstraction of a Button component is the correct one? Having an automatically-updating Overview Map lets your developers have a consistent place to come back to for general context.

Tips:

  1. Use Labels and Colors to denote different functionality sets, for example, Invoicing, Ordering, Users, Profiles, Admin, etc.
  2. Remove config files or others not relevant to the functionality areas.

Onboarding Map

CodeSee Onboarding Map Example
Onboarding Map Example

The Onboarding Map can be used to help developers onboard to specific areas of the codebase. How does a particular area of the code work? Depending on how deep they want to go into the codebase, you can decide if one or multiple Onboarding Maps are needed to prepare them to begin contributing.

Tips:

  1. Use Tours to display key flows through an application (for example, login or checkout) or critical files or directories based on what you're developing (for example, UI). Try to keep Tour text concise and use Notes to go into detail.
  2. Label antiquated paths and patterns to replicate.
  3. Use Colors to show areas of the codebase that would be especially helpful during onboarding—for example, frontend vs. backend, API vs. business logic vs. helpers, languages, etc.
  4. Create focused views of important areas of the codebase that may require a deep dive.
  5. Routinely check Insights to see how the codebase is evolving.

Ownership Map

CodeSee Ownership Map Example
Ownership Map Example

An Ownership Map allows the organization to showcase those responsible for various areas of the codebase. It would then be valuable to have a specific Map for each group.

This type of Map shows you who to contact for code-based questions so you can make sure you're addressing bugs and other maintenance matters with the right person on the right team.

Tips:

  1. Use Colors and Labels to distinguish owners.
  2. Mark sub-teams within Maps bounds and folders, then, expand folders to place individual owners using alternative colors.

Technical Debt Map

A Technical Debt Map is helpful for codebase maintenance and project planning, including identifying the scope of work and visualizing potential issues in the code.

Tips:

  1. Use Labels to reference the severity or urgency of technical debt. For example, a dim color could be used for low urgency whereas a high urgency area could be distinguished with a bright color.
  2. Use Labels for the types of technical debt within a codebase. For example, files to break up, etc.  
  3. Use Notes to explain the problem and why it needs to be addressed.
  4. Use Notes to mark teams that should tackle certain areas of technical debt.
  5. Map Insights are especially useful to glean additional context in this type of Map.

Feature Map

CodeSee Feature Map Example
Feature Map Example

Use a Feature Map to explain to others how a feature is architected. This Map will appear similar to an Overview Map, except it's targeted at a single feature.

Tips:

  1. Collapse files and folders not pertaining to the feature being showcased.
  2. Add comprehensive Notes to key files to explain functionality in detail.
  3. Create a Tour to walk through the feature in execution order.

Feature Planning Map

Use a Feature Planning Map when your team is beginning to define their next new feature. These Maps are especially helpful to communicate and discuss proposed architectural changes.

Tips:

  1. Hide the nodes on your Map that won’t be affected by the new feature.
  2. Use Labels and Colors to communicate areas and ideas.

Pitfalls Map

A Pitfalls Map warns less familiar developers of Programming Gotchas and how to avoid them.

Tips:

  1. Identify a pitfall, then Label the file. Some Labels to consider adding are "ask an expert," "performance critical", and "easy to cause bugs."
  2. Add a Note to a file to explain the pitfall and what a developer could do to avoid or mitigate the risk.

Explore & Learn Map (For Personal Onboarding)

CodeSee Explore & Learn Map Example
Explore & Learn Map Example

Use Explore & Learn Maps during your personal onboarding journey to a new area of the codebase. This Map is a great way to keep track of what you’ve learned as a method of “visual note-taking” as you systematically go through and examine the areas of the codebase you need to understand.

Tips:

  1. Collapse nodes that will not be relevant to your work.
  2. Add Notes to remember what directories contain.
  3. Create a Tour to demonstrate the order of operations and walk through code flows.
  4. Use Labels to mark places to ask questions about—then use the Ownership Map to learn who to ask!
  5. Use Colors to mark areas of interest or potential refactoring.

Notable Mention: Review Map

CodeSee Review Map Flow Example
Review Map Flow Example

Our most popular Map across teams is one that requires no additional configuration. Once a CodeSee Map is installed on a repository, a Review Map is automatically generated with every code review.

With Review Maps, contextualize the potential impact of code changes, address feedback, and track the progress of your review—all in one end-to-end experience. Now, with the Review Maps extension for Visual Studio Code, Review Maps are available in your VS Code environment.

Tips:

  • Code is grouped intuitively so that developers can review based on logic and functionality. For example, choose to review left to right (general to more specific) or vice versa and review sections based on type (back-end vs. front-end changes, etc.).
  • Double-click on individual files in a Map to view code in a side-by-side diff.
  • Place comments to guide contributors, mark files as ‘Viewed’, and even approve reviews—your work will automatically display across GitHub and VS Code.
  • Mark sections as 'Reviewed' as you move through a code review.

Start Leveraging Maps for Shared Understanding

With Maps, you're empowered to share your codebase understanding with other developers and teams. Maps are easy to use, and effortlessly fit into existing workflows. And because they're automatically generated and sync to your codebase with each commit, they're efficient and future proof—evolving with your codebase and team.

Interested in giving Maps a try? Sign up for an account, explore our documentation, and begin creating Maps in minutes.

We can’t wait to see what you build!