{"id":18656420,"url":"https://github.com/cherninlab/react-flow-visualizer","last_synced_at":"2026-02-27T23:16:31.142Z","repository":{"id":261062922,"uuid":"880420269","full_name":"cherninlab/react-flow-visualizer","owner":"cherninlab","description":"🔮 An interactive system architecture diagram builder with React Flow.","archived":false,"fork":false,"pushed_at":"2025-02-25T15:54:47.000Z","size":523,"stargazers_count":1,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-18T00:39:46.566Z","etag":null,"topics":["diagram","react-flow"],"latest_commit_sha":null,"homepage":"https://react-flow-visualizer.pages.dev/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cherninlab.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,"zenodo":null}},"created_at":"2024-10-29T17:34:28.000Z","updated_at":"2025-01-02T15:37:49.000Z","dependencies_parsed_at":"2024-12-27T14:43:09.888Z","dependency_job_id":"18279a45-3cf4-4281-9f3f-4d0f34cc30e2","html_url":"https://github.com/cherninlab/react-flow-visualizer","commit_stats":null,"previous_names":["cherninlab/react-flow-visualizer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cherninlab/react-flow-visualizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cherninlab%2Freact-flow-visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cherninlab%2Freact-flow-visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cherninlab%2Freact-flow-visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cherninlab%2Freact-flow-visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cherninlab","download_url":"https://codeload.github.com/cherninlab/react-flow-visualizer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cherninlab%2Freact-flow-visualizer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29918977,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-27T19:37:42.220Z","status":"ssl_error","status_checked_at":"2026-02-27T19:37:41.463Z","response_time":57,"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":["diagram","react-flow"],"created_at":"2024-11-07T07:23:28.692Z","updated_at":"2026-02-27T23:16:31.112Z","avatar_url":"https://github.com/cherninlab.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Flow Visualizer\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-black.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.1.3-blue.svg)](https://www.typescriptlang.org/)\n[![React](https://img.shields.io/badge/React-18.2.0-blue.svg)](https://reactjs.org/)\n[![Vite](https://img.shields.io/badge/Vite-5.0.12-blue.svg)](https://vitejs.dev/)\n[![Live Demo](https://img.shields.io/badge/🚀-Live_Demo-green.svg)](https://react-flow-visualizer.pages.dev/)\n\nA powerful and flexible React application for creating interactive system architecture diagrams and workflow visualizations using React Flow. Built with React, TypeScript, and Vite.\n\n![alt text](example.gif)\n\n## Quick Start\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone https://github.com/cherninlab/react-flow-visualizer.git\n\n# Navigate to project directory\ncd react-flow-visualizer\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n```\n\n## Documentation\n\n### API Reference\n\n#### Node Types\n\n```typescript\ninterface CustomSquareNodeData {\n  label: string;\n  iconName: string;\n  iconType: 'lucide' | 'radix' | 'local';\n  sourcePosition?: Position;\n  targetPosition?: Position;\n}\n```\n\n## Advanced Configuration\n\n### Custom Theme Creation\n\n1. Create a new CSS file in `src/themes/`:\n\n```css\n.react-flow[data-theme='your-theme'] {\n  --icon-size: 48px;\n  --margin: 16px;\n  /* Add more variables */\n}\n```\n\n2. Register in `ThemeSelector.tsx`:\n\n```typescript\nconst themes = [\n  { value: 'default', label: 'Default' },\n  { value: 'your-theme', label: 'Your Theme' },\n];\n```\n\n## Troubleshooting\n\n### Common Issues\n\n1. **Node Icons Not Loading**\n\n   ```bash\n   # Check if icons are in the correct directory\n   public/icons/\n   ```\n\n## Contributing\n\nWe welcome contributions!\n\n## License\n\nThis project is licensed under the MIT License\n\n## Acknowledgments\n\n- [React Flow](https://reactflow.dev/) for the core functionality\n- [Monaco Editor](https://microsoft.github.io/monaco-editor/) for the code editing experience\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcherninlab%2Freact-flow-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcherninlab%2Freact-flow-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcherninlab%2Freact-flow-visualizer/lists"}