{"id":13681487,"url":"https://github.com/3rd/tsdiagram","last_synced_at":"2025-05-16T03:03:58.762Z","repository":{"id":210806147,"uuid":"726829769","full_name":"3rd/tsdiagram","owner":"3rd","description":"Create diagrams and plan your code with TypeScript.","archived":false,"fork":false,"pushed_at":"2025-03-26T08:52:11.000Z","size":408,"stargazers_count":454,"open_issues_count":4,"forks_count":20,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-08T13:11:12.396Z","etag":null,"topics":["data-modeling","diagram","diagrams","typescript"],"latest_commit_sha":null,"homepage":"https://tsdiagram.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/3rd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2023-12-03T14:28:46.000Z","updated_at":"2025-04-08T03:38:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"3c2a9273-b464-4143-881c-374722ee0364","html_url":"https://github.com/3rd/tsdiagram","commit_stats":null,"previous_names":["3rd/tsdiagram"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3rd%2Ftsdiagram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3rd%2Ftsdiagram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3rd%2Ftsdiagram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3rd%2Ftsdiagram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/3rd","download_url":"https://codeload.github.com/3rd/tsdiagram/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254459084,"owners_count":22074604,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["data-modeling","diagram","diagrams","typescript"],"created_at":"2024-08-02T13:01:31.398Z","updated_at":"2025-05-16T03:03:53.753Z","avatar_url":"https://github.com/3rd.png","language":"TypeScript","readme":"# TSDiagram\n\n**TSDiagram** is an online tool that helps you draft diagrams quickly by using TypeScript.\n\\\n:point_right: https://tsdiagram.com\n\n### **Features**\n\n- Lets you define your data models through **top-level type aliases**, **interfaces**, and **classes**.\n- Automatically layouts the nodes in an efficient way.\n- ...but if you move one of the nodes manually, it will only auto-layout the other ones.\n- Persists the document state in the URL and localStorage.\n- Export your diagrams as SVG.\n\n### **Roadmap**\n\n- Function call representation\n- Customizable TypeScript context (lib, etc.)\n- Bring your own storage (different vendors)\n\n---\n\n\u003e This project is not just a diagramming tool, but also the foundation for a greater code visualization project.\n\u003e Imagine flagging types and functions in your code editor and see how they are connected, and how data flows through them.\n\u003e That's the end goal, so we'll swap the TS compiler with Tree-sitter in the process.\n\n---\n\n![TSDiagram Screenshot](https://root.b-cdn.net/tsdiagram/media.png)\n\n### Test links\n\n- [Default example](https://tsdiagram.com/#/N4IgJg9gxgrgtgUwHYBcDOIBcBtUBLMLEACwBsBrAIQEFi4AFAKwEMBGAJwGEEAzU2AO6UAqiAA0IFHhSkERAOoJ+EROJBoIMdlDmYQeVAnY9mOgAQA5CGARngAHSRmzBTGbQp2BgOYBuR84ADswoxG4eXkh+Ae6a2gjhnj7+TmbeCChmiCjMABQAlG4ASghQEOxgADwRPmJmMEjkSBACSAB8Kc7pmVIyCAWJkdGp3WakBuRoA5bWCNgAup1pGWYARqbk441ThTM2C0ujOWiT0wAqzCcHjgC+KY4GKEYm5hcndjG9soPJMVDEeFIYHYyDcb3I11SHhCMDQbns4F4zBgpBQCLMAB8zAjTFIAG4IdFYhGQJCEkCY7EgKDMJA6UiyMAIpZof4IMAohJmcEAZTZHNkLIQaDQeAgSDh3Mu5B5wtF4shXRWeDQAEkkPR2BBvCCRdNVhAILJaSkbo4HoZjKZbLz+ZyPlCcuwUG4ACIhBBLZBgN0ew4rDnsEJipDTJDwVZGf2ZFWcLQg1D6w3GpCm81IR7Pa1Sk6ykUhh3OaHO31PL1IMAAflLnpio0DwfFYYjUbryrQcfYCZQSaNCBNt3TUFIlzQZnkeHIeELZi1EBQ9BCYXcSSi91SZQlnhgUBQ5Vyc4XS5+UXyM+coRVADpD4vQmYALyzw1H0JLM1INsoKw2HZuH9zPM56zhkWhOIqZgfjcagjh4ACy1h4DweDslgrAAOwAAwAEwAGwACwAJwAMzYdhACsrC4Tc8wSLAXbICgrrQPAjGqoQehkFQtAMCwHDcHwggiCANxAA)\n- [Interfaces](https://tsdiagram.com/#/N4IgJg9gxgrgtgUwHYBcDOIBcBtUBLMLEAIUgDMBhANwGkBaGgcwE4APATQHcAvAKwCkAqgA0YAQxAAaECjwoANgiIBJVAgBOZMVAQZpaCDHU6ieNZu0IABAEErwADpIrLq2QgRMVtCnVnGANxOAL5OZigaWjq29k6uVojqjAhgXj5+SIEhYeZR1sSxzq4ARmLqXjZBSKFIOREW0RSF8WJeAEoIUBDqYAA86f6StgB8VfHFXgCyYgAOvcRDA5nD2UjhkZZWACLNrq222AC6VTV1G9EAolYIrBFIYGgxjkUupeXevv4nZw3WAGLXW7IB62IYFZ7jMTcNKfTLfWprXKbADivQAKkNBMNdi50l40WNXEh4F5BPD1r8rAAJdGAu4gpaMTFWAC8VmJcGKGmxN3pj1RGKsWJxVgiPhhGSy1SkIHkYh8kwgYDwZDwKSwAEYAOwABgATAA2AAszA1Ro1AA4DXrgodpLB1OpkCgttB4M7lIRMCRyNR6Ew2Fw+EJRBJgkA)\n- [Type aliases](https://tsdiagram.com/#/N4IgJg9gxgrgtgUwHYBcDOIBcBtUBLMLEACwCYB2AJQC0BPAMQGYJTSBpALwHEEB1AQ14BRAI4BOEABoQKPCgA2CIgBVaABwQACAILy8-NAgzS0EGACcoSzDPVbtmgLyah58xHOaAZJuAAdJE0gzUMANwRzOVpMTT8QAHd+cyQ8JABzOM0AH1iQCPdzTJy4gDN+FH55OIBuAIBfAJQ7TQAhJx1apEbmgGF2-0Dg-hjtTuDNACMYlrHg8wQoDzAYygWlgB40FEj0yU0AEQA+eoDujQP2rZ206qkQeQMUAFkIMDwSvARCTABGcgAGUgANgALGJSGJyGJGD86gBdaSwNzIFD7aDwFEASW+JAoNAYzFYnB4AmE4hAdSAA)\n- [Interfaces and classes extends \u0026 implements](https://tsdiagram.com/#/N4IgJg9gxgrgtgUwHYBcDOIBcBtUBLMLEAKQFYBJAIwBEAOAOQC8ANAfSloFkAVAZgCsAwlABijAIwgANCBR4UAGwREAogA8UyMGgAEAMh144AByWJUGGWggwATlGWYQUBQEM0ugII7gOgGYQEJg6aCi2eEgA5gDcOgC+ADpILu66AEI+OpSutgAUAJTBoeFRmSgAFrYQAO46SAi1KrZVefmxcfFJKR46gjoIGlpehiZmyOg6Gb7ZrZm2CCh2SDoJINmMq+2dSEkRmrZ+rg46zD5JOhf+gUVhETFJiUh7CAdHCDoAmmfLlzM3JfckI9nq9jgAtfqDJDaE5ST7fS5ZVyMf53aIPaQgNyhTgQMB4Px4BCETDiADsAAYAEwANgALABOXhUqmkcQ0uIAXRksGa42o0Hg43IJJIFBoDBY7C4fCEogkIDiQA)\n\n### Special thanks \u003c3\n\n- [TypeScript](https://www.typescriptlang.org/)\n- [React Flow](https://reactflow.dev)\n- [Monaco](https://github.com/microsoft/monaco-editor)\n- [elkjs](https://github.com/kieler/elkjs)\n- [dom-to-svg](https://github.com/felixfbecker/dom-to-svg)\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F3rd%2Ftsdiagram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F3rd%2Ftsdiagram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F3rd%2Ftsdiagram/lists"}