Build complete Flowchart Creator

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @devkyato

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,35 @@
+name: Bug report
+description: Report a reproducible problem in Flowchart Creator.
+title: "bug: "
+labels: [bug]
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: What happened?
+      description: Describe the problem and what you expected instead.
+    validations:
+      required: true
+  - type: textarea
+    id: steps
+    attributes:
+      label: Steps to reproduce
+      placeholder: |
+        1. Add a Process shape
+        2. Connect it to a Decision
+        3. ...
+    validations:
+      required: true
+  - type: input
+    id: browser
+    attributes:
+      label: Browser and version
+      placeholder: Chrome 130, Firefox 132, Safari 18
+    validations:
+      required: true
+  - type: textarea
+    id: project
+    attributes:
+      label: Project JSON or screenshot
+      description: Attach a minimal exported project or screenshot when useful. Remove sensitive diagram content first.
+

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,6 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Security issue
+    url: https://github.com/devkyato/Nodes/security/advisories/new
+    about: Report vulnerabilities privately.
+

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,24 @@
+name: Feature request
+description: Suggest a focused improvement to the editor.
+title: "feat: "
+labels: [enhancement]
+body:
+  - type: textarea
+    id: problem
+    attributes:
+      label: Problem
+      description: What flowchart task is difficult today?
+    validations:
+      required: true
+  - type: textarea
+    id: proposal
+    attributes:
+      label: Proposed improvement
+      description: Describe the smallest useful behavior or interaction.
+    validations:
+      required: true
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Alternatives considered
+

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,15 @@
+## Summary
+
+Describe the change and the user-facing reason for it.
+
+## Validation
+
+- [ ] `npm test`
+- [ ] `npm run build`
+- [ ] Checked keyboard and pointer interaction when relevant
+- [ ] Updated documentation or changelog when relevant
+
+## Screenshots
+
+Add before/after images for visible interface changes.
+

.github/dependabot.yml

@@ -0,0 +1,9 @@
+version: 2
+updates:
+  - package-ecosystem: github-actions
+    directory: /
+    schedule:
+      interval: monthly
+    labels:
+      - maintenance
+

.github/workflows/ci.yml

@@ -0,0 +1,24 @@
+name: CI
+
+on:
+  push:
+    branches: [main, "agent/**"]
+  pull_request:
+
+permissions:
+  contents: read
+
+jobs:
+  verify:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+      - run: npm ci
+      - run: npm test
+      - run: npm run build
+

.github/workflows/pages.yml

@@ -0,0 +1,40 @@
+name: Deploy Pages
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+      - run: npm ci
+      - run: npm test
+      - run: npm run build
+      - uses: actions/configure-pages@v5
+      - uses: actions/upload-pages-artifact@v4
+        with:
+          path: dist
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+

.github/workflows/release.yml

@@ -0,0 +1,29 @@
+name: Release
+
+on:
+  push:
+    tags: ["v*"]
+
+permissions:
+  contents: write
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+      - run: npm ci
+      - run: npm test
+      - run: npm run build
+      - name: Create release archive
+        run: tar -czf "flowchart-creator-${GITHUB_REF_NAME}.tar.gz" -C dist .
+      - name: Publish GitHub release
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: gh release create "$GITHUB_REF_NAME" "flowchart-creator-${GITHUB_REF_NAME}.tar.gz" --verify-tag --generate-notes --title "Flowchart Creator ${GITHUB_REF_NAME}"
+

.gitignore

@@ -0,0 +1,6 @@
+.tmp/
+dist/
+node_modules/
+*.log
+.DS_Store
+Thumbs.db

CHANGELOG.md

@@ -0,0 +1,22 @@
+# Changelog
+
+All notable changes are documented here. Releases follow [Semantic Versioning](https://semver.org/).
+
+## [Unreleased]
+
+## [1.0.0] - 2026-07-20
+
+### Added
+
+- Compact single-page SVG flowchart editor.
+- Twelve standard flowchart symbols and standalone text.
+- Shape resizing, styling, grouping, alignment, distribution, and layer ordering.
+- Straight, orthogonal, and curved attached connectors with labels and endpoint reconnection.
+- Multiline inline editing, keyboard shortcuts, pan, zoom, snap, and fit-to-screen.
+- Snapshot-based undo and redo for diagram-changing actions.
+- Local storage, JSON project download/import, and SVG/PNG export.
+- Dependency-free packaging and browser workflow tests.
+- Automated CI, GitHub Pages deployment, and tag-based GitHub releases.
+
+[Unreleased]: https://github.com/devkyato/Nodes/compare/v1.0.0...HEAD
+[1.0.0]: https://github.com/devkyato/Nodes/releases/tag/v1.0.0

CONTRIBUTING.md

@@ -0,0 +1,30 @@
+# Contributing
+
+Thanks for improving Flowchart Creator. Keep changes focused, accessible, dependency-free at runtime, and compatible with opening `index.html` directly.
+
+## Development
+
+1. Create a topic branch from `main`.
+2. Run `npm ci`.
+3. Start the local server with `npm start`.
+4. Make the smallest complete change.
+5. Run `npm test` and `npm run build`.
+6. Update `CHANGELOG.md` for user-visible changes.
+
+## Pull requests
+
+- Explain the user-facing problem and the chosen behavior.
+- Include screenshots for visible interface changes.
+- Add browser coverage when changing core interaction behavior.
+- Keep generated output, browser profiles, and editor settings out of commits.
+- Use clear commit messages such as `feat:`, `fix:`, `test:`, `docs:`, `build:`, or `ci:`.
+
+## Design principles
+
+- Prefer direct manipulation and compact controls.
+- Preserve correct flowchart geometry.
+- Keep one coordinate system for nodes, connectors, selection, and export.
+- Make pointer behavior, keyboard behavior, and focus states agree.
+- Avoid network calls, telemetry, and new runtime dependencies.
+
+By contributing, you agree that your work may be distributed under the MIT License.

README.md

@@ -1,2 +1,79 @@
-# Nodes
-A minimal, browser-based node and flowchart editor with editable shapes, connectors, local saving, and SVG/PNG export.
+# Flowchart Creator
+
+[![CI](https://github.com/devkyato/Nodes/actions/workflows/ci.yml/badge.svg)](https://github.com/devkyato/Nodes/actions/workflows/ci.yml)
+[![Pages](https://github.com/devkyato/Nodes/actions/workflows/pages.yml/badge.svg)](https://github.com/devkyato/Nodes/actions/workflows/pages.yml)
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+
+A compact, browser-based flowchart editor built with HTML, CSS, vanilla JavaScript, and SVG. It has no runtime dependencies, sends no diagram data to a server, and works by opening `index.html` directly.
+
+[Open Flowchart Creator](https://devkyato.github.io/Nodes/)
+
+## Highlights
+
+- Twelve standard flowchart symbols with accurate SVG geometry
+- Direct multiline text editing and standalone text
+- Straight, orthogonal, and curved connectors that stay attached
+- Multi-selection, alignment, distribution, grouping, and layer controls
+- Pointer, keyboard, zoom, pan, resize, copy, paste, undo, and redo support
+- Local browser saving plus portable JSON project files
+- Clean SVG and PNG export cropped to the diagram bounds
+- Responsive compact interface with no framework or external library
+
+## Use locally
+
+Open `index.html` in a modern browser. For a local HTTP server:
+
+```bash
+npm start
+```
+
+Then open `http://127.0.0.1:4173`.
+
+## Essential controls
+
+| Action | Control |
+| --- | --- |
+| Select multiple | Shift + click or drag a selection rectangle |
+| Pan | Hold Space and drag |
+| Zoom | Ctrl/Cmd + mouse wheel |
+| Edit text | Double-click a shape, label, or standalone text |
+| Add standalone text | Double-click empty canvas or use Text |
+| Move precisely | Arrow keys; hold Shift for 10 px |
+| Duplicate | Ctrl/Cmd + D |
+| Copy / paste | Ctrl/Cmd + C / Ctrl/Cmd + V |
+| Undo / redo | Ctrl/Cmd + Z / Ctrl/Cmd + Shift + Z |
+| Finish text editing | Click outside or Ctrl/Cmd + Enter |
+| Cancel text editing | Escape |
+
+## Project files
+
+```text
+index.html          Application structure
+style.css           Interface and responsive styling
+script.js           State, rendering, interaction, persistence, export
+scripts/            Dependency-free local server and build packaging
+tests/              Headless-browser workflow verification
+.github/            CI, Pages, releases, and contribution templates
+docs/               Architecture and release notes for maintainers
+```
+
+## Quality checks
+
+```bash
+npm test
+npm run build
+```
+
+The browser smoke suite exercises rendering, connectors, zoomed dragging, resizing, text editing, history, persistence, and SVG/PNG export.
+
+## Privacy
+
+Projects remain in the browser unless the user downloads or imports a file. The application has no analytics, accounts, API calls, or remote storage.
+
+## Contributing
+
+See [CONTRIBUTING.md](CONTRIBUTING.md). Security reports should follow [SECURITY.md](SECURITY.md).
+
+## License
+
+[MIT](LICENSE)

SECURITY.md

@@ -0,0 +1,15 @@
+# Security policy
+
+## Supported versions
+
+Security fixes are applied to the latest release.
+
+## Reporting a vulnerability
+
+Please use [GitHub private vulnerability reporting](https://github.com/devkyato/Nodes/security/advisories/new). Do not open a public issue containing an undisclosed vulnerability or sensitive diagram data.
+
+Include the affected browser, a minimal reproduction, and the expected impact. You should receive an acknowledgement within seven days.
+
+## Data handling
+
+Flowchart Creator runs entirely in the browser. It does not send diagram content to a remote service. Saved projects use the browser's local storage; downloaded project and image files are handled by the browser.

docs/architecture.md

@@ -0,0 +1,29 @@
+# Architecture
+
+Flowchart Creator intentionally keeps the runtime surface small: one HTML document, one stylesheet, and one JavaScript module loaded as a classic script.
+
+## State and history
+
+The application state owns the document title, nodes, edges, selection, viewport, mode, snap preference, and snapshot history. Diagram-changing actions commit once at the end of an interaction, so pointer movement does not flood undo history.
+
+## Coordinate system
+
+Nodes and connectors use a fixed 2400 × 1600 logical workspace. The SVG viewport applies one pan-and-zoom transform. Pointer coordinates are converted back into logical coordinates before movement, resize, selection, or connector calculations. This keeps interaction correct at every zoom level.
+
+## Rendering
+
+Rendering is deterministic from state:
+
+1. Connectors render beneath nodes.
+2. Nodes render in `zIndex` order.
+3. Selection outlines, handles, ports, and temporary gestures render in a separate overlay.
+
+Each flowchart symbol is generated by the shared geometry renderer. Export reuses the same node and connector renderers, then omits the editing overlay and grid.
+
+## Persistence
+
+Projects serialize into a versioned JSON object. Import normalizes missing style fields against current defaults, allowing compatible older files to load. Browser saving uses one namespaced local-storage key.
+
+## Testing
+
+The smoke suite starts the dependency-free server, opens an installed Chromium-family browser through the DevTools protocol, and verifies core workflows without a test framework. CI runs the same suite before packaging and deployment.