FlowMake

Stars
1

FlowMake

Overview

FlowMake is a web application built using Svelte that allows users to create, edit, and download flowcharts. The application features a drag-and-drop interface where users can easily place components from the left panel onto the canvas, customize them, and arrange them as needed to create detailed flowcharts. Additionally, the application provides an option to download the flowchart for offline use.

Features

  • Drag-and-Drop Interface: Users can drag components from the left panel and drop them onto the canvas to build their flowchart.
  • Customizable Components: Once placed on the canvas, components can be customized by adding text and other properties.
  • Download Flowchart: The completed flowchart can be downloaded in a user-friendly format.

Technologies Used

  • Svelte: The web application is built using Svelte, a modern JavaScript framework for building fast and reactive user interfaces.
  • HTML/CSS: For structuring and styling the web pages.
  • JavaScript: For handling dynamic interactions and logic.

Installation

  1. Clone the Repository:

    git clone https://github.com/your-username/flowchart-maker.git
    cd flowchart-maker
    
  2. Install Dependencies:

    npm install
    
  3. Run the Application:

    npm run dev
    

    The application will be available at https://flow-make.vercel.app/.

Usage

  1. Start the Application: Navigate to https://flow-make.vercel.app/ in your web browser.
  2. Create a Flowchart:
    • Use the left panel to select components.
    • Drag and drop components onto the canvas.
    • Click on a component to edit its content.
  3. Download the Flowchart: Once your flowchart is complete, use the "Download" button to save it to your device.

Contribution

If you'd like to contribute to the project, please fork the repository and create a pull request with your changes. Contributions are welcome and encouraged!

License

This project is licensed under the MIT License. See the LICENSE file for more details. Feel free to customize this further to fit your project's specifics!