Docs & Guide

progFocus is a thinking tool that helps you organize goals, specs, and structure step by step.
Visualize what to build before writing code.

Layers

Shift+click to drill into details. Separate the forest from the trees.

Thought Flow

Annotate arrows with reasons and data. Capture design intent.

File Save

Save as Markdown. Easy to manage and share.

AI Integration

Pass your Markdown to AI for design reviews and code generation.

1Design Approach

Four steps to design without getting lost.

  1. Set the goal
    Place an "output" on the right — what you want to build.
  2. Lay out inputs
    Place "inputs" on the left — the data you need.
  3. Connect with processes
    Break into steps with "process" and "feature" nodes, then link with arrows.
  4. Capture intent
    Label arrows with "why" and "what data" flows between nodes.

2Basic Operations

Canvas Controls

  • PanMiddle-click drag / Space + drag
  • ZoomCtrl + scroll (zoom centered on cursor)
  • Range SelectDrag on empty space to select a region

Node Operations

  • AddDrag from the sidebar
  • EditClick title or body text to edit directly
  • Drill DownShift+click a feature node to go deeper; use breadcrumbs to go up

Connections

  • ConnectDrag from the handles (circles) on node edges to another node
  • Edit LabelDouble-click an arrow label. Press Enter for bullet-point input
  • Move LabelDrag the label box to reposition it

Keyboard Shortcuts

  • UndoCtrl + Z (⌘ + Z on Mac)
  • RedoCtrl + Shift + Z (⌘ + Shift + Z on Mac)
  • DeleteSelect a node/connection and press Delete or Backspace

3Save & Import

Data is auto-saved in the browser, but we recommend using "File Save" to keep a local backup.

File Save

From the workspace menu (top-right). Downloads in Markdown (.md) format.

Import

Use the "Import" button on the home page to restore from a saved file.

4Login & Cloud Features

Log In / Sign Up

Log in with Google or GitHub. An account is automatically created on first login.

  1. Click "Log in" at the top-right of the home page
  2. Choose Google or GitHub
  3. Authorize in the provider's screen
  4. You'll be redirected back to progFocus, logged in

Cloud Save

When logged in, your projects are automatically saved to the cloud. Access them from any browser or device by logging into the same account.

Benefits of Cloud Save

  • • Data persists even if you close the browser
  • • Access from any device
  • • Link sharing is available

Local vs. Cloud

  • • Local: browser-only (no login needed)
  • • Cloud: server-side (login required)
  • • Both: "File Save" backup recommended

Link Sharing

Cloud-saved projects can be shared via link.

  1. Select "Share" from the workspace menu
  2. A share link is generated — copy it
  3. Recipients can view without logging in

Anyone with the link can view the project. Be careful when sharing projects with sensitive information.

5Tree View

See your design at a glance

Toggle between canvas and tree view using the switch at the top of the workspace.

What you can do in Tree View

  • • See the full hierarchy of your design
  • • View parent-child relationships in tree format
  • • Great for checking completeness and the big picture

When to use which

  • • Canvas: editing — placing nodes, connecting arrows
  • • Tree: reviewing — checking overall structure

6Program Definitions

Attach program elements to nodes

Link program elements like classes, functions, and interfaces to nodes, making the connection between design and code explicit.

How to use

  1. Click the "Def" button in the workspace header to turn it ON
  2. A "Program Definition" section appears below each node
  3. Select a type from the dropdown
  4. Fill in names, arguments, and other fields as appropriate

Supported types (8)

Class
Class name・Methods・Properties
Method
Method name・Arguments・Return value・Visibility
Interface
Interface name・Methods
Function
Function name・Arguments・Return value
Variable
Variable name・Type・Initial value
Struct
Struct name・Fields
Enum
Enum name・Values
Module
Module name・Exports

Shared names (Definition Registry)

Names you enter (file names, class names, etc.) are automatically registered in the project-wide Definition Registry.

  • • Available as suggestions in other nodes
  • • Prevents naming inconsistencies
  • • Preserved in Markdown exports

Export Markdown with definitions and pass it to AI for more accurate code generation that understands your class structure and function signatures.

7FAQ

Will I lose data if I close the browser?

Yes, there's a good chance data will be lost.
Auto-save is temporary, so always use "File Save" from the menu before leaving.

Do I need to log in?

No. All design features (canvas, node editing, file save, etc.) work without login.
Logging in adds cloud save and link sharing.

Can I undo actions?

Yes — Ctrl+Z (⌘+Z on Mac).

8AI Integration Guide

⚠️ Always provide both files together

When asking AI for design edits or code generation, always provide these two files together:

① Your design file

Markdown exported via "File Save" from the workspace

② AI Editing Rules

Download from the button below

Download AI Editing Rules (.md)

Designs created in progFocus are saved as Markdown.
Pass this Markdown along with the AI Editing Rules to AI (ChatGPT, Claude, GitHub Copilot, etc.) to get design improvement suggestions or code generation.

AI Integration Flow

Design → Save as Markdown → Pass to AI with editing rules → Apply suggestions → Re-import

Preparing to send Markdown to AI

  1. Download the rules file from the "Download AI Editing Rules" button above
  2. Export your design file via "File Save" from the workspace menu
  3. Paste both files' contents into your AI chat

Why both files? The AI Editing Rules contain node placement rules, connection directions, and format specs.
Without them, AI may output an incorrect format, causing import errors.

Prompt examples: Design improvement

Add to design

Please read the following "AI Editing Rules" and "Design Markdown". [AI Editing Rules] [Paste contents of AI_editing_rules_en.md] --- [Design Markdown] [Paste your design file] --- Add a "Login" feature to this design. Add nodes and connections following input (user credentials) → process (authentication) → output (result display), and output in the same format.

Design review

Please read the following "AI Editing Rules" and "Design Markdown". [AI Editing Rules] [Paste contents of AI_editing_rules_en.md] --- [Design Markdown] [Paste your design file] --- Please review this design. - Are there any missing processes? - Are there any issues with the data flow? - Please provide specific suggestions for improvement.

Create a design from scratch

Please generate a progFocus Markdown following the "AI Editing Rules" below. [AI Editing Rules] [Paste contents of AI_editing_rules_en.md] --- What I want to build: Product search for an e-commerce site - Input: Search keywords, category filters - Process: Query builder, DB search, sorting - Output: Search results list Format: progfocus.markdown.v1 Place nodes in a left-to-right data flow (input → process → output).

Prompt examples: Code generation

Generate code from design

Please read the following "AI Editing Rules" and "Design Markdown". [AI Editing Rules] [Paste contents of AI_editing_rules_en.md] --- [Design Markdown] [Paste your design file] --- Based on this design, implement the code in Python. Implement each node as a function and pass data following the connection flow. Refer to the memo field of each node for implementation details.

Implement a specific node

Please read the following "AI Editing Rules" and "Design Markdown". [AI Editing Rules] [Paste contents of AI_editing_rules_en.md] --- [Design Markdown] [Paste your design file] --- Implement the "PWM Calculation" node (id: process-pwm). Input comes from "Joystick Input Data", output goes to "PWM Signal Output". Language: Python (Raspberry Pi) Framework: RPi.GPIO

Generate API spec

Please read the following "AI Editing Rules" and "Design Markdown". [AI Editing Rules] [Paste contents of AI_editing_rules_en.md] --- [Design Markdown] [Paste your design file] --- Based on this design, create a REST API specification. Treat each node as an endpoint or processing step, and represent the input → process → output flow as an API flow. Output format: OpenAPI 3.0 (YAML)

Re-importing AI output

  1. Copy the Markdown output from AI
  2. Paste it into a text editor and save as a .md file
  3. Click "Import" on the progFocus home page
  4. Select the saved .md file to import

Always verify the AI output format (frontmatter, JSON structure). nodeCount and connectionCount must match the actual numbers.

Checklist for AI requests

  • □Downloaded AI Editing Rules (AI_editing_rules.md)
  • □Exported design file via "File Save"
  • □Pasted both files into the AI chat
  • □Wrote a specific request
Download AI Editing Rules (.md)