Introducing AngularDoc Team Services

Hanyu Xiao
Mar 18, 2019 · 3 min read

We are excited to announce AngularDoc Team Services — the world’s first SaaS service that provides static analysis for JavaScript/TypeScript applications.

For more than two years, AngularDoc has provided code analysis for AngularJS/Angular projects. In this new release, we have added support for two more web application frameworks — React and Vue.

The detailed feature set of AngularDoc Team Services can be seen at We’d like to highlight below a key new addition— the state management diagrams.

State management diagrams for NgRx, Redux, and Vuex

State management libraries such as Redux, NgRx, and Vuex, have been widely used in the web applications. Although there may be differences in certain constructs and terminologies among the libraries, the core architecture is similar: there is a central store that is the single source of truth for the state, and decoupled components that focus on a single task for each, such as dispatching the actions, mutating the state, and displaying a slice of the state. While the benefit of such design is obvious, a common complaint of these libraries is their verbosity — the code that is exercised throughout an action’s life cycle is scattered in multiple modules, and it’s not trivial to piece together all these in one mental picture.

Our state management diagrams (Redux, NgRx, Vuex) are specifically designed to put the entire state management structure right in front of your eyes. You can trace how the actions flow through the system: from the component that dispatches an action, to the reducer/mutation that alters the state upon receiving the action, and finally to the component that displays the new state. Better yet, you can click on an item in the diagram and the corresponding code snippet will be highlighted in a text editor.

Vuex Store in
NgRx Store in
Redux Store in

This is especially valuable for developers who work on large projects to quickly come up to speed with your store’s implementations. It is also a great visual aid to developers who are learning to use NgRx/Redux/Vuex. In addition, you can capture the diagram in SVG and embed the downloaded file in your documentation.

What’s next

You can head to our demo site,, where we have a collection of sample repositories for Angular, React, and Vue to let you experience what AngularDoc Team Service has to offer.

AngularDoc Team Service is currently available to GitHub repositories. You can use the service in two ways:

  1. AngularDoc Team Service is provided to open source projects for free on
  2. Our SaaS service for closed source projects is hosted on The annual subscription costs USD $99.

In both cases, signing up is a quick three-step process:

  1. Log in using your GitHub credential, and authorize AngularDoc to access your repository;
  2. Set up a subdomain for your account (<myorg> in a single click;
  3. Pick which repository to use AngularDoc Team Service for.

Then just leave the rest to us — we will automatically analyze your source code and its commit history, and the future commits will be automatically synced through our webhook. Within a few minutes, your team can enjoy a rich set of live diagrams that provide insights into your application’s structure that you have never seen before.

Please don’t hesitate to contact us if you have any questions or comments.


Architectural analysis, visualization, code generation, and many more!

Hanyu Xiao

Written by

Founder of AngularDoc. A technologist who loves building developer tools. Husband and proud father of two beautiful children.


Architectural analysis, visualization, code generation, and many more!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade