Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 39 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,38 @@
# Frappe Draw
<p align="center">
<img src="draw/public/logo.svg" alt="Frappe Draw" height="80" />
</p>

Diagramming for Frappe — create **mind maps, flowcharts, block diagrams and
freeform whiteboards**, with real-time co-editing, right inside your Frappe site.
<h1 align="center">Frappe Draw</h1>

<p align="center">
One canvas for <b>mind maps, flowcharts, whiteboards & block diagrams</b> —
with real-time co-editing and Writer-style sharing, right inside your Frappe site.
</p>

---

## One unified canvas

Frappe Draw puts every diagram type on a **single canvas** — no separate editors, no
type picker. Start drawing immediately, and pull in exactly what you need:

- **Insert menu** drops auto-laid-out **mind-map** and **flowchart** frames onto the canvas, like templates.
- **In-frame editing** — double-click any frame to focus it and edit with that type's full dedicated editor, then step back to the canvas.
- Mix mind maps, flowcharts, whiteboard sketches and block shapes in **one document**.

## Features

- **Mind maps** — auto-laid-out, balanced two-sided trees with keyboard-first editing, cross-links, markers and per-node styling.
- **Flowcharts** — typed nodes (process, decision, terminator, …), auto-routed orthogonal connectors, branch labels and one-click tidy.
- **Flowcharts** — typed nodes (process, decision, terminator, …), auto-routed orthogonal connectors, branch labels, auto-numbering and one-click tidy.
- **Block diagrams** — shapes, connectors with attached endpoints, alignment/distribution, rich text and a floating contextual toolbar.
- **Whiteboards** — pen, highlighter, partial eraser, sticky notes, tables, lines, laser pointer and image insert.
- **Real-time co-editing** — multiple people on the same canvas at once.
- **Real-time co-editing** — multiple people on the same canvas at once, with live cursors.
- **Sharing** — Writer-style **view / comment / edit** access per person, plus public or restricted general access, built on Frappe's native permissions.
- **Library** — organise diagrams into folders, pin favourites, search and filter; per-user and permission-scoped.
- **Navigation** — minimap, zoom/pan, fit-to-view, alignment guides and named sections.
- **Export** — PNG and PDF.
- **Desk app launcher** — appears in the Frappe `/apps` screen with its own icon.
- **Optional [Frappe Drive](https://github.com/frappe/drive) integration** — a diagram shows up in Drive as a file that opens right back in Draw.

## Installation

Expand All @@ -23,7 +44,19 @@ bench get-app https://github.com/frappe/draw
bench --site your-site.localhost install-app draw
```

Then open `https://your-site.localhost/draw`.
The Vue frontend is built automatically during install (via `bench build`). Then open
`https://your-site.localhost/draw`.

> Upgrading an existing install? Pull the latest and rebuild the frontend:
> ```bash
> bench get-app draw --branch main
> bench build --app draw && bench --site your-site.localhost clear-cache
> ```
Comment on lines +50 to +54

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 bench get-app installs a new app and will fail if the app is already present. The correct upgrade path is bench update --app draw (or cd apps/draw && git pull).

Suggested change
> Upgrading an existing install? Pull the latest and rebuild the frontend:
> ```bash
> bench get-app draw --branch main
> bench build --app draw && bench --site your-site.localhost clear-cache
> ```
> Upgrading an existing install? Pull the latest and rebuild the frontend:
> ```bash
> bench update --app draw
> bench build --app draw && bench --site your-site.localhost clear-cache
> ```

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!


### Frappe Cloud

Add the app to your bench group from `https://github.com/frappe/draw` (branch `main`),
let the deploy build it, then install it on a site and open `/draw`.

## Contributing

Expand Down
Loading