Clondin · Clondin · Aug 11, 2025
diff --git a/README.md b/README.md
@@ -1,2 +1,7 @@
-# web
-www
+# Flowchart Project Manager
+
+A tiny web application for building project plans as a flowchart. Add tasks and define dependencies to visualize how work flows through a project.
+
+## Usage
+
+Open `index.html` in a web browser. Use the form to enter a task name and optionally choose a dependency. Each submission updates the flowchart diagram displayed below the form.
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Flowchart Project Manager</title>
+  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+  <script defer src="script.js"></script>
+</head>
+<body>
+  <h1>Flowchart Project Manager</h1>
+  <form id="task-form">
+    <input type="text" id="task-name" placeholder="Task name" required>
+    <select id="task-dependency">
+      <option value="">No dependency</option>
+    </select>
+    <button type="submit">Add Task</button>
+  </form>
+  <div id="chart">
+    <div class="mermaid" id="mermaid-diagram"></div>
+  </div>
+  <script>
+    mermaid.initialize({ startOnLoad: false });
+  </script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,46 @@
+const tasks = [];
+const dependencies = [];
+
+const form = document.getElementById('task-form');
+const nameInput = document.getElementById('task-name');
+const depSelect = document.getElementById('task-dependency');
+const diagramEl = document.getElementById('mermaid-diagram');
+
+function sanitize(name) {
+  return name.replace(/\s+/g, '_');
+}
+
+form.addEventListener('submit', (e) => {
+  e.preventDefault();
+  const name = nameInput.value.trim();
+  if (!name) return;
+
+  const id = sanitize(name);
+  tasks.push({ id, name });
+  const dep = depSelect.value;
+  if (dep) dependencies.push({ from: dep, to: id });
+
+  // update dependency dropdown
+  const option = document.createElement('option');
+  option.value = id;
+  option.textContent = name;
+  depSelect.appendChild(option);
+
+  nameInput.value = '';
+  depSelect.value = '';
+  renderChart();
+});
+
+function renderChart() {
+  let def = 'flowchart TD\n';
+  tasks.forEach(t => {
+    def += `${t.id}[${t.name}]\n`;
+  });
+  dependencies.forEach(d => {
+    def += `${d.from}-->${d.to}\n`;
+  });
+  diagramEl.innerHTML = def;
+  mermaid.init(undefined, diagramEl);
+}
+
+renderChart();