Does the editor support solid fill, gradient fill, and line-fill styles?

Yes. You can switch fill modes between solid, gradient, and line-fill styles, then adjust related options such as gradient mode, direction, stops, and opacity.

Which export formats are available?

The download panel supports PNG, JPG, WEBP, SVG (Mermaid), Mermaid source file (.mmd), and JSON snapshot export.

What does the free plan include for AI and exports?

The published free plan includes 20 AI generations per month and 5 Mermaid exports per month, while premium unlocks unlimited AI and unlimited Mermaid exports.

How do I zoom and navigate quickly in the editor?

You can use hand mode for panning, Ctrl + mouse wheel for zoom, and View menu actions like Zoom In, Zoom Out, and Fit to Screen.

My AI Flowchart

Editor manual

Complete editor guide: shortcuts, styling controls, AI, exports, zoom, and menus

Q: What are the main keyboard shortcuts in My AI Flowchart?

Tool shortcuts include V for select, number keys 1 to 8 for shapes, T for text, F for freehand, H for hand mode, and editor actions like Ctrl/Cmd+Z for undo and Ctrl/Cmd+Y for redo.

Q: Can I place text icons on the left, right, top, or bottom of a shape label?

Yes. The icon tab includes explicit position controls for left, right, top, and bottom placement, plus icon color and icon size.

This page explains the major controls in My AI Flowchart so new users can move faster and advanced users can work with fewer clicks.

Last updated: May 23, 2026

Quick navigation

Keyboard shortcuts
Text icon options
Background, gradient, and fill styles
Border and connector options
AI generation, credits, and free plan limits
Download and export formats
Hand tool, zoom, and screen fit
All editor menus explained

Keyboard shortcuts cheat sheet

These shortcuts are built into the editor workflow and can dramatically speed up diagram drafting.

Tool shortcuts

Project actions

G: Scale and theme | D: Download panel | O: Open projects | N: New diagram | S: Save (single-key action in editor context).

History and cleanup

Ctrl/Cmd+Z: Undo | Ctrl/Cmd+Y: Redo | Ctrl/Cmd+Shift+Z: Redo alternative | Ctrl/Cmd+Shift+Backspace: Clear canvas.

Movement and connection

Arrow keys nudge selected nodes. Hold Shift with a selected node to start a connector and click target node to link.

Close actions

Escape closes open menus, popups, and modal overlays (download, theme, account, pricing, and other editor panels).

Canvas zoom

Ctrl + mouse wheel zooms in or out around your pointer position for faster precision work.

Text icon options (left, right, top, bottom)

The icon tab gives full control over shape-adjacent icons and text markers.

Browse icons: open icon library and pick from preset symbol styles.
Position: place the icon on left, right, top, or bottom of the label.
Icon color: choose any icon color from picker for contrast and branding.
Icon size: scale icons between small and oversized states for emphasis.
Upload icon: attach custom image icon (including SVG/image files).
Remove icon: clear icon instantly from selected node.

Background color, gradient, fill style, and opacity

Shape background controls are split into solid fill, line-fill patterns, and gradient modes.

Solid fill

Use presets or custom color picker. You can also set no-fill for transparent-style nodes.

Gradient fill

Choose gradient presets, then expand “More options” for advanced gradient editing.

Gradient modes

Linear, radial, and conic gradient modes are available with mode-specific controls.

Direction and position

Adjust linear directions, radial shapes/positions, and conic position + degree rotation.

Color stops and repeat

Add color stops and toggle repeat to create layered, animated-looking styles.

Line-fill patterns

Pick pattern styles such as rough fill, hatching, crosshatch, dots, scribble, and directional lines.

Opacity: each shape also includes opacity control for subtle layering and visual hierarchy.

Border controls and connector options

Border and line tools help you define visual structure, path importance, and hand-drawn aesthetics.

Border color: preset circles + custom picker for precise brand colors.
Border stroke style: none, solid, dashed, dotted, dash-dot.
Border width: fine to thick stroke range for emphasis.
Border sloppiness: increase irregularity for sketch/rough look.
Rough style presets: multiple hand-drawn stroke personalities and contour styles.
Connector color: dedicated line/arrow palette + custom color.
Connector stroke style: none, solid, dashed, dotted, dash-dot.
Connector width: adjust line prominence in dense diagrams.
Connector sloppiness: organic line feel for whiteboard-style maps.
Line opacity: reduce visual noise on background relationship lines.

AI generation, free credits, and plan limits

The AI dock can generate Mermaid from natural-language prompts and load it directly into your canvas workflow.

AI prompt dock: describe your process and click “Generate & Load.”
Credits visibility: account/profile chips show current credit status.
Free plan: published limits include 20 AI generations per month and 5 Mermaid exports per month.
Premium plan: unlimited AI generations and unlimited Mermaid exports.
Use case: generate fast first drafts, then refine structure manually in the editor.

For current pricing and plan details, review the pricing page.

Download options and export features

The download panel supports production outputs for docs, handoff, storage, and structured backups.

Raster exports

PNG, JPG, and WEBP are available for slides, docs, and sharing.

Source exports

SVG (Mermaid render), Mermaid source (.mmd), and JSON snapshot for technical workflows.

Scale controls

Export scale options include 1x, 2x, 3x, and 4x output resolution.

Quality controls

JPG/WEBP quality slider helps balance visual quality and file size.

Include options

Toggle fit-to-window, include background, and include grid based on output needs.

Share-ready output

Use image formats for presentations and Mermaid/JSON exports for versioned technical pipelines.

All menu details (File, Edit, View, profile, quick links)

The status-bar menus mirror common desktop editor workflows so teams can onboard faster.

File menu: New Diagram, Open, Save, Save As, Export, Clear Canvas, Recent Files.
Edit menu: Undo, Redo, Duplicate Selected, Delete Selected.
View menu: Scale & Theme, Zoom In, Zoom Out, Fit to Screen, Toggle Grid, Toggle Theme.
Quick links menu: Home, Terms, Privacy, Refund, Cancellation, Contact, About, Support.
Profile menu: credits display, account, saved works, pricing, settings, sign out.
Status chips: active tool, shapes/links count, grid+zoom+snap status, connection helper text.

Suggested workflow for new users

Start with AI prompt generation for quick structure.
Switch to select and shape tools for cleanup and hierarchy.
Apply fill, gradient, border, and icon options for readability.
Add connectors and run arrow-key nudges for alignment polish.
Export in PNG/JPG/WEBP for sharing and Mermaid/JSON for technical reuse.

FAQ

Common questions about editor options

What are the main keyboard shortcuts in My AI Flowchart?

Use V for select, number keys for shape presets, T for text, F for freehand, H for hand mode, and Ctrl/Cmd shortcuts for undo/redo/save.

Can I place text icons on the left, right, top, or bottom of a shape label?

Yes. The icon tab includes direct position buttons for left, right, top, and bottom placement plus color and size controls.

Can I use solid, gradient, and pattern fills in the same project?

Yes. Fill settings are node-level, so each shape can use its own fill mode and opacity based on visual intent.

What are free AI and export limits?

Published free limits include 20 AI generations/month and 5 Mermaid exports/month; premium unlocks unlimited usage for both.

What file formats can I download?

You can export PNG, JPG, WEBP, SVG (Mermaid), Mermaid .mmd source, and JSON snapshot files.

Where can I learn symbol usage and process examples next?

Use the symbols guide and flowchart examples pages for modeling patterns.