{"id":47271433,"url":"https://github.com/earthdmitriy/angular-mermaider","last_synced_at":"2026-03-27T22:00:44.173Z","repository":{"id":345579862,"uuid":"1173727004","full_name":"earthdmitriy/angular-mermaider","owner":"earthdmitriy","description":"Static code analyser that produces Mermaid dataflow diagrams for Angular components","archived":false,"fork":false,"pushed_at":"2026-03-19T19:49:15.000Z","size":73,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-20T09:48:55.764Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/earthdmitriy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-05T17:25:13.000Z","updated_at":"2026-03-19T19:49:19.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/earthdmitriy/angular-mermaider","commit_stats":null,"previous_names":["earthdmitriy/angular-mermaider"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/earthdmitriy/angular-mermaider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/earthdmitriy%2Fangular-mermaider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/earthdmitriy%2Fangular-mermaider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/earthdmitriy%2Fangular-mermaider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/earthdmitriy%2Fangular-mermaider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/earthdmitriy","download_url":"https://codeload.github.com/earthdmitriy/angular-mermaider/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/earthdmitriy%2Fangular-mermaider/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31061197,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-27T19:32:53.857Z","status":"ssl_error","status_checked_at":"2026-03-27T19:32:45.136Z","response_time":164,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2026-03-15T13:00:29.420Z","updated_at":"2026-03-27T22:00:44.161Z","avatar_url":"https://github.com/earthdmitriy.png","language":"TypeScript","readme":"# angular-mermaider\n\n\u003e Static code analyser that produces Mermaid dataflow diagrams for Angular components\n\nangular-mermaider statically analyzes Angular component source (TypeScript + inline/template HTML) and emits Mermaid-compatible charts that visualize component dataflow. It's focused on components that handle data reactively (observables, streams, signals) and produces clear graphs of how data moves through properties, streams and template bindings.\n\n## Key ideas\n- Static-only: analyzes source code and templates without executing the app.\n- Reactive-first: designed for components that express data flow using Observables, Signals or other stream-like primitives.\n- Mermaid output: produces a markdown file containing a ```mermaid``` code block (file: `\u003ccomponent\u003e.dataflow.md`).\n\n## Restrictions \u0026 Scope\n- This tool intentionally targets purely reactive dataflows. It assumes components avoid in-place mutations and side-effects, and instead build streams/pipelines (Observables, Subjects, Signals, StatefulObservables, etc.).\n- It will not (reliably) model imperative mutating code, direct DOM writes, or functions that perform side effects. If your component mixes mutation/imperative updates with reactive pipelines, results may be incomplete or misleading.\n- Template analysis supports common binding forms (attribute bindings, event handlers, interpolation and expansion forms). Some tokenized expansion-form AST shapes require a conservative fallback; in rare cases this may yield extra fallback entries.\n\n## Example output\n```mermaid\n---\ntitle: Component dataflow\n---\ngraph LR\n    subgraph Sources\n        subgraph Injected\n            direction LR\n            Source_clientsApi[\"\n                clientsApi\n            \"]\n            Source_bucketApi[\"\n                bucketApi\n            \"]\n            Source_allProducts$(\"\n                allProducts$\n            \")\n        end\n        subgraph Inputs\n            direction LR\n            Source_clientId(\"\n                clientId\n            \")\n            Source_showBucket(\"\n                showBucket\n            \")\n        end\n    end\n    subgraph Processing\n        Processing_clientId$(\"\n            clientId$\n        \")\n        Processing_client$(\"\n            client$\n        \")\n        Processing_bucket$(\"\n            bucket$\n        \")\n        Processing_populatedBucket$(\"\n            populatedBucket$\n        \")\n        Processing_showBucket@{ shape: f-circ, label: \"Junction\" }\n    end\n    subgraph Consumers\n        subgraph TemplateRead\n            direction LR\n            Consumer_client$(\"\n                client$\n                x3\n            \")\n            Consumer_showBucket[\"\n                showBucket\n            \"]\n            Consumer_populatedBucket$(\"\n                populatedBucket$\n                x2\n            \")\n        end\n    end\n    Sources ~~~ Processing\n    Processing ~~~ Consumers\n    Source_showBucket --\u003e Processing_showBucket\n    Source_clientId --\u003e Processing_clientId$\n    Processing_clientId$ --\u003e Processing_client$\n    Source_clientsApi --\u003e Processing_client$\n    Processing_clientId$ --\u003e Processing_bucket$\n    Source_bucketApi --\u003e Processing_bucket$\n    Processing_bucket$ --\u003e Processing_populatedBucket$\n    Source_allProducts$ --\u003e Processing_populatedBucket$\n    Processing_showBucket --\u003e Consumer_showBucket\n    Processing_client$ --\u003e Consumer_client$\n    Processing_populatedBucket$ --\u003e Consumer_populatedBucket$\n\n```\n* rounded nodes represent reactive properties (observables or signals)\n* Not linked nodes represent entities managed outside of reactive dataflow.\n* Red nodes represent mutable class members\n* Yellow nodes represent readonly, but writable reactive sources: subjects or writable signals\n\n\n## Usage (CLI)\n\nQuick usage via npx (recommended):\n\n```bash\nnpx angular-mermaider \"path/to/my-component.component.ts\"\n```\n\nType `npx angular-mermaider ` and drag your file with component from IDE into the CLI.\n\n\nIf you built locally, you can also run the built CLI directly:\n\n```bash\nnode ./dist/cli.js path/to/my-component.component.ts\n```\n\nOn success the tool writes a file next to the component named `my-component.component.dataflow.md` containing a Mermaid chart. Open that file in any Markdown viewer that supports Mermaid or paste the chart into the Mermaid Live Editor.\n\n## Install\n\nNo special install is required for end users: prefer the quick `npx` usage described above in \"Usage (CLI)\".\n\nIf you want to run or develop locally, clone the repository and install dependencies, then build the CLI:\n\n```bash\ngit clone https://github.com/earthdmitriy/angular-mermaider.git\ncd angular-mermaider\nnpm install\nnpm run build\n```\n\nThe built CLI is written to `./dist/cli.js` and can be executed with `node ./dist/cli.js` as shown in the Usage section.\n\n## Programmatic API\n\nYou can also import and invoke the library from Node (example):\n\n```ts\nimport { main } from \"./dist/mermaider/mermaider.js\";\n\n// (The CLI entry simply calls `main()`, but you can require and call library functions as needed.)\n```\n\nSee `src/mermaider/mermaider.ts` for the main flow: it extracts class properties, extracts template references, combines them, formats a mermaid graph and writes a `.dataflow.md` file.\n\n## What it recognizes\n- Class properties (constructor-injected services, declared properties)\n- Observable-like properties (detected via type text such as `Observable`, `Subject`, `StatefulObservable`, etc.)\n- Signals (detected via `Signal` in the type)\n- Template references from:\n  - Attribute bindings: `[attr]=\"...\"`, `(event)=\"...\"`, `[(ngModel)]=\"...\"`\n  - Text interpolation: `{{ ... }}`\n  - Expansion forms (e.g. `@if`, `@for`) including some tokenized forms (with conservative fallback)\n\n## Example\n\nGiven a component that declares a `stream` property and in the template binds `[class.loading]=\"stream.pending$ | async\"`, the analyzer detects `stream.pending$` as a value node in the template and links it to the component's `stream` property in the generated dataflow chart.\n\n## Tests\n\nRun unit tests with:\n\n```bash\nnpm test\n```\n\nThe repository includes unit tests for the template analyzer, class-property extraction, and other core modules.\n\n## Contributing\n- Open issues for bugs and feature requests.\n- Add focused unit tests for new template shapes or property patterns before implementing broad changes.\n\n## Limitations \u0026 future ideas\n- Improve precision for tokenized expansion-form AST shapes so fallback heuristic can be removed.\n- Add heuristics to better filter noisy fallback matches (control keywords, structural tokens).\n- Support analysis across multiple files (component + service interactions) to build cross-component dataflow.\n\n## Changelog\n* 0.2.0\n     * reactive members (signals or observables) represented with rounded nodes\n     * mutable nodes have red background\n     * reactive writable nodes have yellow background\n     * ts-morph project being reused across all files in batch\n        * `npx angular-mermaider \"src/**/*.component.ts\"` work much faster\n     * fixed few border-cases\n     * internal logic streamlined with pipes\n\n## License\nISC\n","funding_links":[],"categories":["Development Utilities"],"sub_categories":["Code Analysis"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fearthdmitriy%2Fangular-mermaider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fearthdmitriy%2Fangular-mermaider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fearthdmitriy%2Fangular-mermaider/lists"}