Skip to content

ThisIs-Developer/SketchFlow

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

14 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

SketchFlow 🎨

Apache 2.0 License LinkedIn

SketchFlow is a professional, feature-rich sketch drawing application inspired by Excalidraw. Create beautiful diagrams, sketches, and drawings with an intuitive interface and powerful tools designed for both professionals and casual users.

Features ✨

πŸ› οΈ Professional Drawing Tools

  • Selection Tool (V): Select, move, and manipulate existing elements
  • Hand Tool (H): Pan around the canvas for easy navigation
  • Rectangle (R): Draw perfect rectangles with customizable properties
  • Circle (C): Create circular shapes with precision
  • Diamond (D): Draw diamond shapes for flowcharts and diagrams
  • Ellipse (E): Create elliptical shapes
  • Arrow (A): Draw arrows with automatic arrowheads for diagrams
  • Line (L): Draw straight lines between points
  • Pen/Brush (P): Freehand drawing with smooth curves
  • Text Tool (T): Add text annotations to your drawings
  • Eraser: Remove unwanted elements

🎨 Advanced Styling Options

  • Stroke Color: Choose from preset colors or use custom colors
  • Fill Color: Multiple fill options including transparent, solid, and hatch patterns
  • Stroke Width: Four preset widths (Thin, Regular, Bold, Extra Bold)
  • Stroke Style: Solid, dashed, or dotted lines
  • Sloppiness Control: Adjust from architect-precise to hand-drawn cartoonist style
  • Opacity Control: Fine-tune transparency for all elements

πŸ” Canvas Controls

  • Zoom In/Out (+/-): Scale your canvas for detailed work
  • Reset Zoom (0): Return to 100% view instantly
  • Fit to Screen: Optimize canvas view
  • Grid Background: Visual guide for alignment

πŸ’Ύ Export & Sharing

  • Export as PNG: High-quality image export with white background
  • Export as SVG: Vector graphics for scalability (coming soon)
  • Export as JSON: Save and reload your work
  • Copy to Clipboard: Quick sharing with one click

⌨️ Keyboard Shortcuts

  • Tool Selection: Single-key shortcuts (V, H, R, C, D, E, A, L, P, T)
  • Actions: Standard shortcuts (Ctrl+Z/Y for Undo/Redo, Ctrl+C/V for Copy/Paste, Ctrl+D for Duplicate)
  • Delete: Remove selected elements with Delete or Backspace
  • Select All: Ctrl+A to select all elements
  • View: +/- for zoom, 0 to reset

πŸŒ“ Dark Mode

  • Toggle between light and dark themes for comfortable drawing in any environment

πŸ“± Responsive Design

  • Fully responsive interface that works seamlessly on desktop, tablet, and mobile devices
  • Touch-optimized controls for mobile drawing

Screenshots πŸ“Έ

Main Interface

Professional toolbar with all drawing tools and comprehensive property controls.

Dark Mode

Comfortable drawing experience in low-light environments.

Keyboard Shortcuts

Quick access to all features with intuitive keyboard shortcuts.

Getting Started πŸš€

To run SketchFlow locally or contribute to the project, follow these steps:

  1. Clone the repository:
git clone https://github.com/ThisIs-Developer/SketchFlow.git
  1. Open the project directory:
cd SketchFlow
  1. Open the index.html file in your web browser to launch SketchFlow.

Technologies Used πŸ’»

  • HTML5: Semantic markup and Canvas API
  • CSS3: Modern styling with CSS Variables for theming
  • JavaScript (ES6+): Vanilla JavaScript with Canvas API for drawing functionality
  • Responsive Design: Mobile-first approach with media queries
  • Material Icons: Professional icon set

Contributing 🀝

Contributions to SketchFlow are welcome! To contribute, follow these steps:

  1. Fork the repository.
  2. Create a new branch (git checkout -b feature/my-feature).
  3. Make your changes and commit them (git commit -am 'Add new feature').
  4. Push to the branch (git push origin feature/my-feature).
  5. Create a new Pull Request.

License πŸ“

This project is licensed under the Apache-2.0 License. See the LICENSE file for details.

Contact πŸ“§

For any questions or feedback regarding SketchFlow, please open an issue on the GitHub repository or contact the project maintainer here.


Enjoy drawing and creating with SketchFlow! πŸŽ‰

About

SketchFlow is a web app for creating digital art 🎨. It features tools like rectangles, circles, brushes, and erasers, providing a seamless canvas experience for artists and creators.

Topics

Resources

License

Stars

Watchers

Forks

Contributors