Excalidraw Plugin: Split Box

English | 简体中文

A simple yet powerful plugin for Excalidraw to split rectangular boxes into matrices.

Overview

Split Box is an Excalidraw plugin designed to enhance your diagramming experience. It allows you to easily split a rectangular box horizontally, vertically, or both to create a matrix-like structure. Perfect for creating grids, tables, flowcharts, or any layout that requires subdivided sections.

• Key Features:
  • Horizontal splitting: Divide a rectangle into rows.
  • Vertical splitting: Divide a rectangle into columns.
  • Matrix formation: Combine both for a grid layout.
  • Customizable divisions: Adjust the number of splits as needed.
  • Seamless integration with Excalidraw's drawing tools.

This plugin is ideal for users who frequently work with structured diagrams, such as mind maps, organizational charts, or UI wireframes.

Installation

To install the Split Box plugin in Excalidraw:

1. Download the Plugin:

   • Clone this repository:

     git clone https://github.com/SystemCaller/excalidraw-plugin-Split-Box.git
     

   • Or download the ZIP file from the releases page.

2. Load in Excalidraw:

   • Open Excalidraw in your browser (e.g., excalidraw.com).
   • Go to the menu: Menu > Load Plugin.
   • Select the Split Box.md or Split Box.svg file from the downloaded repository.
   • The plugin will now appear in your Excalidraw toolbar.

3. Dependencies:

   • No additional dependencies required. Works with the standard Excalidraw environment.

Note: Ensure you're using the latest version of Excalidraw for compatibility. If you encounter issues, check the Excalidraw documentation.

Usage

Once installed, using Split Box is straightforward:

1. Draw a Rectangle:

   • Use Excalidraw's rectangle tool to create a base box.

2. Activate the Plugin:

   • Select the rectangle.
   • Click on the "Split Box" icon in the toolbar (or use the shortcut if configured).

3. Configure Splits:

   • Horizontal Split: Enter the number of rows (e.g., 2 for a simple halve).
   • Vertical Split: Enter the number of columns (e.g., 3 for thirds).
   • Matrix Mode: Enable both for a grid (e.g., 2x3 matrix).

4. Apply and Edit:

   • The plugin will automatically generate the splits with equal spacing.
   • You can further edit lines, add text, or connect elements as needed.

Example

Here's a step-by-step example:

• Input: A single rectangle.
• Action: Split horizontally into 2 parts.
• Output: Two equal rows.

For a 2x3 matrix:

• Select rectangle → Split horizontally (2) → Split vertically (3).

For more advanced usage, refer to the Split Box.md file in this repo, which includes detailed code snippets and configurations.

Contributing

We welcome contributions! To get involved:

1. Fork the repository.
2. Create a new branch: git checkout -b feature/your-feature.
3. Commit your changes: git commit -m 'Add some feature'.
4. Push to the branch: git push origin feature/your-feature.
5. Open a Pull Request.

Please read CONTRIBUTING.md for details on our code of conduct and submission process. (If not present, feel free to create one!)

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Built with love for the Excalidraw community.
• Inspired by common diagramming needs in productivity tools.
• Thanks to contributors: []

If you find this plugin useful, give it a ⭐ on GitHub!

---

Last updated: February 2025
Author: SystemCaller
For support, open an issue on GitHub.