{"id":20825822,"url":"https://github.com/joewood/diagrams","last_synced_at":"2026-04-25T01:38:02.173Z","repository":{"id":42669734,"uuid":"238083043","full_name":"joewood/diagrams","owner":"joewood","description":"Experiment in WebGL 3D React component simulator","archived":false,"fork":false,"pushed_at":"2026-03-06T02:56:02.000Z","size":25098,"stargazers_count":1,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-06T07:35:00.092Z","etag":null,"topics":["react","react-three-fiber","simulator","webgl"],"latest_commit_sha":null,"homepage":"","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/joewood.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":"2020-02-03T23:24:54.000Z","updated_at":"2026-03-06T02:54:56.000Z","dependencies_parsed_at":"2023-10-11T01:29:11.313Z","dependency_job_id":null,"html_url":"https://github.com/joewood/diagrams","commit_stats":{"total_commits":53,"total_committers":4,"mean_commits":13.25,"dds":0.2264150943396226,"last_synced_commit":"8f74771f69f9c2d571aa2da54d72ccb502bda0f5"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/joewood/diagrams","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joewood%2Fdiagrams","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joewood%2Fdiagrams/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joewood%2Fdiagrams/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joewood%2Fdiagrams/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joewood","download_url":"https://codeload.github.com/joewood/diagrams/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joewood%2Fdiagrams/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32247505,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T13:21:15.438Z","status":"ssl_error","status_checked_at":"2026-04-24T13:21:15.005Z","response_time":64,"last_error":"SSL_read: 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":["react","react-three-fiber","simulator","webgl"],"created_at":"2024-11-17T23:06:53.383Z","updated_at":"2026-04-25T01:38:02.138Z","avatar_url":"https://github.com/joewood.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Diagrams\n\nA collection of components for creating auto-layout diagrams from data.\n\n\n\n## @diagrams/graph\n\nA force-based layout for directed acyclic graphs. This diagram uses a slight variation where nodes in the graph are also leaf nodes in a hierarchy that also relates and groups nodes together. Relationships (edges) between the nodes are aggregated up the hierarchy so that parent nodes inherit their children's relationships.\n\n\n\n\n```\n\n\u003cGraph graph={graph}\n\n    selectedNode={selectedNode}\n    onSelectNode={({ text }) =\u003e setNode(text)} \u003e\n    \u003cMessage feedTo=\"start\" startDelay={0.1}\u003e\n    \u003c/Graph\u003e\n\n```\n\n-   Deferred start based on time\n-   Messages owned by node, sent across each edge\n-   When complete callback used with all expired messages\n-   Owner (the Graph) removes messages from node A and propagages them to node B and C\n-   Circular dependencies are fine, messages just keep going\n\n\n## Space Avaialble\n\nTotal Needed Space = M\nMeasured Max Distance = Wm\nSpace Available = S (pixels)\nConversion between pixel to measured space = R\n\nPoint in pixel space = Ps\nPoint in measured space = Pv\n\nPs = Pv * R\nWidth of left most box = W1s (in pixel space)\nWidth of right most box = W2s\nPv = Ps / R\n\nM = W1s/2R + Wm + W2s/2R\n\nR = S/M\n\nM = MW1s/2S + Wm + MW2s/2S\nM = M (W1s/2S + W2s/2S) + Wm\nM = M (W1s+W2s)/2S + Wm\nM - M (W1s+W2s)/2S = Wm\nM ( 1 - (W1s+W2s)/2S) = Wm\nM =  Wm / ( 1 - (W1s+W2s)/2S)\n\nWm = 3000\nW1s = 20\nW2s = 30\nS = 200\n\nM = 3000 / ( 1 - (20+30)/400)\nM = 3000 / (1 - 50/400)\nM = 3000 / (1 - 1/8)\nM = 3000 / (7/8)\nM = 3000 * 8 /7\nM = 3428.571\n\n## Expandable Graph in Graph\n\nSimpleGraph\n    onResize - useGraphResize - resizes the graph\n    onNodePositioned - places a node position\n    \u003cMiniGraph\u003e - simpleNodes, positions them\n        - overlap check\n        - calls ResizeNeeded\n        - Renders use \u003cNode\u003e\n        - Calls OnNodePositioned when changing position\n    \u003cEdges\u003e - renders the edges to the screenNodes\n\nExpandableGraph\n    onResize - useGraphResize\n    Render\u003cMiniGraph\u003e - flag to render sub-nodes\n        - overlap check\n        - calls ResizeNeed\n        - Renders use \u003cnode\u003e, includes subNodes\n          - Renders using \u003cMiniGraph\u003e\n            - overlap check\n            - Resize\n          - Resize Node (as outer Node of Graph)\n          - Calls onNodePosition when resizing\n\n\nWhen expanding a sub-graph the mini-graph will arrange nodes using a fixed width. Nodes are rendered to a fixed screen size (the size of the parent node in the parent graph). If any of the nodes are overlapping based on the graph layout it will request that the parent expands the node. This request is handled by the parent node (L2-nodes-\u003esub-graph.mini-graph-\u003enode) via the hook `useGraphResize`. The Node component maintains a size override. \n\nWhen the Node is resized the parent MiniGraph is notified via the onNodesPositioned callback so that the MiniGraph has an accurate picture of all positions and sizes (see posSizes).\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoewood%2Fdiagrams","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoewood%2Fdiagrams","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoewood%2Fdiagrams/lists"}