⚙️ Settings
WITH recent_orders AS (
SELECT
customer_id,
order_id,
order_date,
total_amount
FROM orders
WHERE order_date >= DATEADD(day, -30, GETDATE())
)
SELECT
customer_id,
COUNT(order_id) AS order_count,
SUM(total_amount) AS total_spent
FROM recent_orders
GROUP BY customer_id
ORDER BY total_spent DESC;
WITH RECURSIVE employee_hierarchy AS (
-- Anchor: top-level rows (no manager)
SELECT
employee_id,
manager_id,
employee_name,
1 AS level
FROM employees
WHERE manager_id IS NULL
UNION ALL
-- Recursive: join children to their parent's result
SELECT
e.employee_id,
e.manager_id,
e.employee_name,
eh.level + 1
FROM employees e
INNER JOIN employee_hierarchy eh
ON e.manager_id = eh.employee_id
)
SELECT *
FROM employee_hierarchy
ORDER BY level, employee_name;
-- Note: SQL Server / Oracle: drop the RECURSIVE keyword (just WITH employee_hierarchy AS (...))
SELECT
o.order_id,
c.customer_name,
o.order_date,
p.product_name,
oi.quantity
FROM orders o
INNER JOIN customers c
ON o.customer_id = c.customer_id
LEFT JOIN order_items oi
ON o.order_id = oi.order_id
LEFT JOIN products p
ON oi.product_id = p.product_id
WHERE o.order_date >= '2026-01-01'
ORDER BY o.order_date DESC;
SELECT
DATE_TRUNC('month', order_date) AS order_month, -- PostgreSQL
-- FORMAT(order_date, 'yyyy-MM') AS order_month, -- SQL Server
-- DATE_FORMAT(order_date, '%Y-%m') AS order_month, -- MySQL
COUNT(*) AS order_count,
SUM(total_amount) AS revenue
FROM orders
GROUP BY DATE_TRUNC('month', order_date)
ORDER BY order_month;
SELECT
customer_id,
order_id,
order_date,
total_amount,
ROW_NUMBER() OVER (
PARTITION BY customer_id
ORDER BY order_date DESC
) AS order_rank,
SUM(total_amount) OVER (
PARTITION BY customer_id
ORDER BY order_date
ROWS BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW
) AS running_total
FROM orders;
CREATE PROCEDURE GetCustomerOrders
@CustomerId INT,
@StartDate DATE = NULL,
@EndDate DATE = NULL
AS
BEGIN
SET NOCOUNT ON;
SELECT
order_id,
order_date,
total_amount
FROM orders
WHERE customer_id = @CustomerId
AND (@StartDate IS NULL OR order_date >= @StartDate)
AND (@EndDate IS NULL OR order_date <= @EndDate)
ORDER BY order_date DESC;
END;
-- Call it: EXEC GetCustomerOrders @CustomerId = 101, @StartDate = '2026-01-01';
MERGE INTO customers AS target
USING staging_customers AS source
ON target.customer_id = source.customer_id
WHEN MATCHED THEN
UPDATE SET
target.customer_name = source.customer_name,
target.email = source.email,
target.updated_at = GETDATE()
WHEN NOT MATCHED THEN
INSERT (customer_id, customer_name, email, created_at)
VALUES (source.customer_id, source.customer_name, source.email, GETDATE());
#FACC15
rgb(250, 204, 21)
rgb(98%, 80%, 8%)
hsl(46, 96%, 53%)
hsv(46, 92%, 98%)
cmyk(0%, 18%, 92%, 2%)
Flow Planner — Draw Flowcharts & Diagrams Online
The Flow Planner lets you sketch flows and diagrams using draggable shapes and arrow connectors, then export the finished board as a PNG. It's built for anyone who needs a lightweight online flowchart maker for planning a process, mapping a workflow, or sketching a decision tree — without the complexity of full diagramming software. Add shapes, connect them, and export — all in your browser.
⚡ Key Takeaways
- Four base shapes with drag-to-connect arrows and inline text editing.
- Connectors can be repointed by dragging an endpoint, not just deleted and redrawn.
- Export the finished board as a high-resolution PNG in one click.
- Best for quick, general-purpose sketches rather than strict UML notation.
What, Who, When & Why
| What it's for | A visual board for sketching flowcharts and diagrams using draggable shapes and connectors. |
|---|---|
| Who it's for | Anyone planning a process, workflow, or decision tree who wants a quick visual without full diagramming software. |
| When to use it | During planning discussions, process documentation, or any time an idea is easier to explain visually than in text. |
| Why it's needed | Full diagramming software is often more complex than needed for a quick sketch, and text descriptions of a process are harder to follow than a diagram. |
| Best way to use it | Use diamonds for decision points and rectangles for process steps consistently, following common flowchart conventions. |
How to Use the Flow Planner
- Click a shape button (Rectangle, Square, Circle, or Diamond) to add it to the board.
- Drag shapes to arrange them, or drag the corner handle on a selected shape to resize it.
- Double-click a shape to type text directly inside it.
- Drag from a shape's blue connection dot onto another shape to draw an arrow between them.
- Click a connector to select it — drag an endpoint to repoint it to a different shape, or click 🗑 to delete it.
- Click ⤢ to expand the board full-screen, and 📸 to export the finished diagram as a PNG.
Example
A simple approval process might use a rectangle labeled "Submit Request," connected to a diamond labeled "Approved?", which branches to two more rectangles: "Process Order" if yes, and "Notify Rejection" if no. Building this takes just a few clicks — add each shape, type its label by double-clicking, then drag connectors between them to show the flow of the process.
Key Features
- Four base shapes: rectangle, square, circle, and diamond.
- Inline text editing directly inside each shape.
- Drag-to-connect arrows between shapes, with live preview while dragging.
- Repointable connectors — drag an existing connector's endpoint to a different shape instead of deleting and redrawing.
- Resizable shapes for fitting more text.
- Color palette for organizing shapes by category or type.
- Full-screen expand mode for focused diagramming.
- Export the finished board as a high-resolution PNG.
- Auto-saves to your browser between visits.
Practical Use Cases
- Process mapping: sketch out a business process or workflow step by step.
- Decision trees: use diamond shapes to represent decision points with branching arrows.
- System diagrams: map out how components in a system connect and interact.
- Planning discussions: quickly visualize an idea during a meeting or brainstorming session, then export it to share.
- Onboarding documentation: create a simple visual guide showing the steps in a recurring process.
Tips for Best Results
- Use diamonds consistently for decision points and rectangles for process steps, following common flowchart conventions, to make the diagram easier for others to read.
- Color-code shapes by team, status, or category to make a complex diagram easier to scan at a glance.
- Expand to full screen before doing detailed layout work on a larger diagram, then export once you're happy with the arrangement.
Related Terminology
A flowchart uses connected shapes to represent a sequence of steps or decisions, with different shapes conventionally representing different types of steps — diamonds often represent decision points, while rectangles represent process steps, and circles or ovals commonly mark the start and end points of a process.
Important Considerations
The board is designed for general-purpose diagramming rather than formal UML or specialized notation — if you need strict adherence to a particular diagramming standard, treat this as a quick sketching tool rather than a fully compliant diagramming application. Diagrams are saved to your browser's local storage, so they're tied to your current device and browser rather than syncing automatically elsewhere.
Related Tools
Planning a database structure instead of a general process? Use the purpose-built ER Diagram Designer. For capturing notes alongside your diagram planning, try Sticky Notes.
Frequently Asked Questions
How do I add text inside a shape?
Double-click the shape — an inline text box appears directly on top of it, ready to type into.
How do I connect two shapes with an arrow?
Hover over a shape to reveal small blue dots at its edges, then drag from one of those dots onto the shape you want to connect to.
Can I move a connector to a different shape after drawing it?
Yes, click the connector to select it, then drag either endpoint onto a different shape to repoint it without needing to delete and redraw it.
Can I export my diagram as an image?
Yes, click the 📸 export button to download the entire board as a PNG image.
Will my diagram be there if I come back later?
Yes, the board auto-saves to your browser's local storage, so it will still be there the next time you visit on the same device and browser.
Tools for analysts, developers & QA engineers
33 free, browser-based utilities — text and list tools, SQL helpers, converters, and small productivity apps. Everything runs locally; nothing you type or paste is ever uploaded.
For Analysts
Clean lists, build SQL fragments, and reshape data without opening a spreadsheet.
For Developers
Format SQL, convert data formats, and handle everyday text and encoding tasks.
For QA Engineers
Generate test data, compare text output, and sanitize queries before sharing them.