diff --git a/README.md b/README.md
index fab11f6..bf9e76c 100644
--- 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
new file mode 100644
index 0000000..cfb00f8
--- /dev/null
+++ b/index.html
@@ -0,0 +1,25 @@
+
+
+
+
+ Flowchart Project Manager
+
+
+
+
+ Flowchart Project Manager
+
+
+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..c10d459
--- /dev/null
+++ 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();