https://github.com/open-source-labs/Svelvet Skip to content Toggle navigation Sign up * Product + Actions Automate any workflow + Packages Host and manage packages + Security Find and fix vulnerabilities + Codespaces Instant dev environments + Copilot Write better code with AI + Code review Manage code changes + Issues Plan and track work + Discussions Collaborate outside of code + Explore + All features + Documentation + GitHub Skills + Blog * Solutions + For + Enterprise + Teams + Startups + Education + By Solution + CI/CD & Automation + DevOps + DevSecOps + Case Studies + Customer Stories + Resources * Open Source + GitHub Sponsors Fund open source developers + The ReadME Project GitHub community articles + Repositories + Topics + Trending + Collections * Pricing [ ] * # In this repository All GitHub | Jump to | * No suggested jump to results * # In this repository All GitHub | Jump to | * # In this organization All GitHub | Jump to | * # In this repository All GitHub | Jump to | Sign in Sign up {{ message }} open-source-labs / Svelvet Public * Notifications * Fork 74 * Star 1.4k A lightweight Svelte component library for building interactive node-based flow diagrams svelvet.io License MIT license 1.4k stars 74 forks Star Notifications * Code * Issues 21 * Pull requests 3 * Discussions * Actions * Projects 0 * Security * Insights More * Code * Issues * Pull requests * Discussions * Actions * Projects * Security * Insights open-source-labs/Svelvet This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. main Switch branches/tags [ ] Branches Tags Could not load branches Nothing to show {{ refName }} default View all branches Could not load tags Nothing to show {{ refName }} default View all tags Name already in use A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch? Cancel Create 6 branches 0 tags Code * Local * Codespaces * Clone HTTPS GitHub CLI [https://github.com/o] Use Git or checkout with SVN using the web URL. [gh repo clone open-s] Work fast with our official CLI. Learn more. * Open with GitHub Desktop * Download ZIP Sign In Required Please sign in to use Codespaces. Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Launching Xcode If nothing happens, download Xcode and try again. Launching Visual Studio Code Your codespace will open once ready. There was a problem preparing your codespace, please try again. Latest commit Timmy Lem fixed issue on minimap files to increase accessibility ... 1 d78f0d5 Jan 5, 2023 fixed issue on minimap files to increase accessibility d78f0d5 1 Git stats * 798 commits Files Permalink Failed to load latest commit information. Type Name Latest commit message Commit time .github/workflows updated readme Jul 22, 2022 NPM Package/svelvet fixed issue on minimap files to increase accessibility Jan 5, 2023 cypress fixed issue with blog test Jan 5, 2023 src fixed issue on minimap files to increase accessibility Jan 5, 2023 static return to ssr aws deploy May 31, 2022 tests added typescript and deleted old files Jul 20, 2022 .gitignore initialized project May 10, 2022 LICENSE Initial commit May 6, 2022 README.md Merge branch 'stagingTest' into staging Jan 5, 2023 cypress.config.ts updating cypress for video removal Sep 7, 2022 package-lock.json FINAL COMMIT FOR LAUNCH Jan 5, 2023 package.json fixed issue on minimap files to increase accessibility Jan 5, 2023 postcss.config.cjs created documentation site May 18, 2022 svelte.config.js Merge branch 'dev' into prod-att Jul 20, 2022 tailwind.config.cjs edited doc website and modularized tailwind classes May 30, 2022 tsconfig.json finished logic for login/logout rendering Jul 6, 2022 vite.config.js changes to .env file & vite.config.js to enable svelteDevTools Oct 5, 2022 View code [ ] Simplify Diagramming with Svelvet! Version Updates Changelog Key Features Installation Quick Start Testing The Svelvet Team Forking the Repository How to Contribute Credits License README.md banner MIT License NPM Downloads GitHub Stars GitHub Forks NPM Version Simplify Diagramming with Svelvet! Svelvet is a lightweight Svelte component library for building interactive node-based diagrams. [?] Getting Started | Documentation | [?][?] Blog | Twitter | LinkedIn Version Updates Shout out to our contributors! Here's what's new: Changelog v5.0.0 * Added interactive node linking & creation * Added ability to load custom Svelte components as nodes * Added an optional minimap that allows you to visualize larger diagrams * Added progammatic initial zoom and location * Added custom classes for nodes to allow for uniform styling * Added a feature that allows you to export and import diagrams * Added an optional boundary to the diagram * Added functionality to edit nodes by right-clicking on a node to bring up a modal * Added an optional feature that allows users to delete nodes * NOTE: Please make sure to give nodes and edges unique IDs to prevent forEach key duplicate error! * Solved github issue #s: 65, 78, 80, 81, 85, 86, 104, 105, 146, 147, 148, 151, 153, 158 * Updated documentation page on website to include new features * Updated home page to include newest collaborators v4.0.0 * Added ability to include HTML in inside of nodes (i.e. videos, sounds, etc) * Added NPM Package folder in root directory of GitHub repo * this folder is used for adding changes to library & pushing updates to NPM; included here to have version control through GitHub * Added snap-to-grid functionality for use during runtime in the canvas (GitHub Issue 107) * Corrected issue where nodes become magnetized when moved outside of the visible canvas boundaries (GitHub Issues 120 & 125) * Removed unused dotenv & node.env dependency from NPM Package package.json (GitHub Issue 118) * Moved all dependancies in devDependancies to regular dependancies object, except for d3-zoom which is used by the client during runtime * Added group nodes functionality * Updated main website page to include newest set of collaborators * Added CSS option for canvas background * Added documentation for HTML in nodes, snap-to-grid, canvas background coloring, and node grouping to website documents * General refactoring throughout application to improve responsiveness and decrease size * Created documentation to assist future developers in understanding the flow of data in Svelvet and provide list of potential updates/upgrades v3.0.0 * Added right-click context menu functionality on REPL playground page * Added capability to add custom nodes and edges via context menu * Added custom node/edge shortcuts for optimized user experience * Incorporated dynamic addition of custom node/edge via predictive algorithm * Added ability to copy text from code editor * Node diagrams now have the option to be fixed in place * Added tutorial overlay for REPL playground page * Added ability to access quick view documentation via popup modal * Updated documentation to allow easier contributor access('.env' file setup) * Updated Community link on website to redirect to Svelvet thread on Stackoverflow * Implemented skeleton codebase for a Community Forum with full database/route accessibility(for future contributors) v2.0.2 * Added left and right anchor points * Added step and smoothstep edge types * Incorporated mixed edge functionality * Refactored how edge text and labels render for every edge * Fixed D3Zoom bias bug * Expanded styling options, including label color, label background, and edge color * Nodes are now able to contain images and will render differently based on the presence of label text * Nodes are now draggable on touch screens and reposition themselves to center on your touch * Implemented data reactivity * Expanded TypeScripting * Added E2E testing using Cypress * Expanded unit tests * Added a REPL to our documentation site * Added SQL database to our REPL * Added GitHub OAuth to enable users to save their custom diagrams created in our new REPL * Expanded documentation for new features * Added full CI/CD pipeline v1.0.3 * Fixed bug with running tests * Added ability to render multiple unique Svelvet components * Added a 'clickCallback' customization option for nodes v1.0.2 * Fixed bug with importing types for TypeScript applications * Added a 'borderRadius' customization option for nodes * Fixed SVG zoom/pan bug (zoom/pan is now limited to Svelvet component only) Key Features * Easy to use: To get started with Svelvet, all you need is data for nodes and edges. Visit our documentation website for streamlined, user-friendly tutorials and examples on how to get the most out of your Svelvet flowchart! * Interactive: Elegant and smooth interface when selecting a node to drag it across the graph. * Customizable: Ability to customize your nodes and edges (node size, color, border and edge type, label, anchor). More coming soon! * Fast rendering: Re-rendering is based on changes to initial values for nodes, edges and optional background and movement (collaborator credit to dvisockas). * Reliable: Svelvet is written in TypeScript and tested with Vitest , Cypress and Svelte Testing Library. Svelvet is maintained by motivated engineers seeking to contribute to the larger Svelte developer community and library ecosystem. * Room to Grow: There is so much we can do to improve, add features and make Svelvet the best version of itself - we welcome feedback and contributions! Scroll below for suggestions on what to contribute. screenshot Installation Svelvet is available as both an npm and a yarn package. You can install it by running one of the two commands: npm install svelvet yarn add svelvet Quick Start Start by importing Svelvet into your application: import Svelvet from 'svelvet'; A Svelvet component consists of nodes and edges (or just nodes). You can pass nodes and edges as props to the Svelvet component. By default, Svelvet components allow for the ability to move nodes and edges as well as pan and zoom. However, if you would like to render a fixed diagram, simply pass in the movement attribute and set it's value to false! You can add a dot-grid background like the example below. With the information that you provide for your nodes and edges, Svelvet will do all of the work behind-the-scenes to render your flowchart! Visit our website to learn more on how to customize your nodes and edges to your liking! Testing Testing is done with Vitest and the Svelte Testing Library. You can find tests in the /tests folder. In order to run the tests use the command: For Unit testing npm run test:unit For End-to-End testing npm run cypress:open The Svelvet Team * Aaron Willett * LinkedIn * Github * Alexander Zambrano * LinkedIn * Github * Andrew Widjaja * LinkedIn * Github * Anu Sharma * LinkedIn * Github * Justin Wouters * LinkedIn * Github * Walter DeVault * LinkedIn * Github * Ali Adams * LinkedIn * Github * Von Garcia * LinkedIn * Github * Damian Lim * LinkedIn * Github * Christopher Mander * LinkedIn * Github * David Jakubiec * LinkedIn * Github * Jeffrey Wentworth * LinkedIn * Github * Johnny Tran * LinkedIn * Github * Samee Vohra * LinkedIn * Github * Abhi Gullapalli * LinkedIn * Github * Ian Hnizdo * LinkedIn * Github * Mauricio Castro * LinkedIn * Github * Ryan Potter * LinkedIn * Github * Emma Ferguson * LinkedIn * Github * Dillon McKenna * LinkedIn * Github * Taylor Alan * LinkedIn * Github * Timmy Lem * LinkedIn * Github * Tony Lim * LinkedIn * Github Forking the Repository If you'd like to fork the repository and run it locally, you'll need to perform a couple of steps to in order to get everything working properly: * Create an account on Supabase * Create a new project in Supabase (you can name this whatever you want) * Rename the 'supabase_env' file to '.env' and paste in the API keys from your newly created supabase project into the .env file Once that is done you should be able to render the website locally on localhost:3000, although you will be missing some minor functionality tied to the production database (e.g. OAuth login). How to Contribute The following is a list of features and improvements by ourselves and the larger Svelte community for any open source developer to contribute. If you have any additional ideas, feel free to raise the issue or implement them as well! * Premade node menu with drag & drop abilities * Select and Delete a specific edge * Rotating and resizing of nodes * Expandable and collapsible parent nodes that can hide/show their children nodes * Add documentation/video tutorial on how to set up a Svelvet demo * Custom error handling * Increase test coverage for scalability * More styling and customization of edges for complex Svelvet flow diagrams * Community Forum * GET CREATIVE!! Svelvet is an amazing project that has so much room to grow. Credits Inspired by React Flow, Svelvet expands the tools available to Svelte developers and makes Svelte more inviting to both new and seasoned software engineers. Under the hood, Svelvet depends on the d3-zoom library to zoom and pan across the graph. License Svelvet is developed under the MIT license. About A lightweight Svelte component library for building interactive node-based flow diagrams svelvet.io Topics npm library opensource typescript svelte diagrams devtool flowcharts sveltekit Resources Readme License MIT license Stars 1.4k stars Watchers 15 watching Forks 74 forks Releases No releases published Packages 0 No packages published Used by 57 * @metaory * @mattkennedy416 * @dmgolembiowski * @Markusxmr * @windmill-labs * @stakwork * @avarun42 * @jomarip + 49 Contributors 31 * @andrew-widjaja * @TensionCoding * @dmckenna44 * @aubertlone * @taylien96 * @awillettnyc * @ianhnizdo * @JustinWouters * @anulepau * @jeffreywentworth * @sameev + 20 contributors Languages * Svelte 76.8% * JavaScript 10.8% * TypeScript 10.1% * HTML 1.7% * CSS 0.6% Footer (c) 2023 GitHub, Inc. Footer navigation * Terms * Privacy * Security * Status * Docs * Contact GitHub * Pricing * API * Training * Blog * About You can't perform that action at this time. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.