A local-first diagramming tool for editable technical workflows
+
+ OpenFlowKit is built for architecture diagrams, flowcharts, system design, structured
+ imports, and AI-assisted diagram drafting. The docs are written to help you choose the
+ right starting point quickly instead of reading the full navigation tree end to end.
+
+
+
+
+
Use it when diagrams need to stay editable
+
+ OpenFlowKit is a better fit when you want to keep iterating in the canvas, work from
+ code-backed definitions, or export technical diagrams without flattening the workflow.
+
+
+
+
Use AI as an assistant, not the whole workflow
+
+ The AI docs explain how prompting, refinement, and settings work so teams can use AI
+ intentionally instead of treating it like a one-shot image generator.
+
+
+
+
Start from the job you need done
+
+ The fastest route is usually by workflow: architecture mapping, code-backed diagrams,
+ imports, exports, or editor fundamentals.
+
+
+
+
+
Start Here
diff --git a/public/robots.txt b/public/robots.txt
index 93b65977..ee7c5af1 100644
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -2,3 +2,4 @@ User-agent: *
Allow: /
Sitemap: https://openflowkit.com/sitemap.xml
+Sitemap: https://docs.openflowkit.com/sitemap-index.xml
diff --git a/public/sitemap.xml b/public/sitemap.xml
index e9cefd6b..3aef4430 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -5,14 +5,4 @@
weekly1.0
-
- https://app.openflowkit.com/
- daily
- 0.9
-
-
- https://docs.openflowkit.com/
- weekly
- 0.8
-
diff --git a/scripts/generate-sitemap.js b/scripts/generate-sitemap.js
index 8c98dc55..d2035c9a 100644
--- a/scripts/generate-sitemap.js
+++ b/scripts/generate-sitemap.js
@@ -6,12 +6,62 @@ const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const OUTPUT_FILE = path.resolve(__dirname, '../public/sitemap.xml');
+const PAGES_DIR = path.resolve(__dirname, '../web/src/pages');
+const SITE_URL = 'https://openflowkit.com';
-const ROUTES = [
- { loc: 'https://openflowkit.com/', changefreq: 'weekly', priority: '1.0' },
- { loc: 'https://app.openflowkit.com/', changefreq: 'daily', priority: '0.9' },
- { loc: 'https://docs.openflowkit.com/', changefreq: 'weekly', priority: '0.8' },
-];
+const ROUTE_SUFFIXES = new Set(['.astro', '.md', '.mdx']);
+
+function toRoute(relativePath) {
+ const normalizedPath = relativePath.replace(/\\/g, '/');
+ const withoutExtension = normalizedPath.replace(/\.(astro|md|mdx)$/u, '');
+
+ if (withoutExtension === 'index') {
+ return '/';
+ }
+
+ if (withoutExtension.endsWith('/index')) {
+ return `/${withoutExtension.slice(0, -'/index'.length)}/`;
+ }
+
+ return `/${withoutExtension}/`;
+}
+
+function collectRoutes(directory, relativeDirectory = '') {
+ const entries = fs.readdirSync(directory, { withFileTypes: true });
+
+ return entries.flatMap((entry) => {
+ const entryRelativePath = path.posix.join(relativeDirectory, entry.name);
+ const entryAbsolutePath = path.join(directory, entry.name);
+
+ if (entry.isDirectory()) {
+ return collectRoutes(entryAbsolutePath, entryRelativePath);
+ }
+
+ const extension = path.extname(entry.name);
+ const isStaticPage =
+ ROUTE_SUFFIXES.has(extension) &&
+ !entryRelativePath.startsWith('api/') &&
+ !entry.name.startsWith('[');
+
+ if (!isStaticPage) {
+ return [];
+ }
+
+ return [toRoute(entryRelativePath)];
+ });
+}
+
+function buildRoutes() {
+ const discoveredRoutes = collectRoutes(PAGES_DIR);
+
+ return Array.from(new Set(discoveredRoutes))
+ .sort((left, right) => left.localeCompare(right))
+ .map((route) => ({
+ loc: new URL(route, SITE_URL).toString(),
+ changefreq: route === '/' ? 'weekly' : 'monthly',
+ priority: route === '/' ? '1.0' : '0.7',
+ }));
+}
function renderUrl({ loc, changefreq, priority }) {
return [
@@ -24,10 +74,11 @@ function renderUrl({ loc, changefreq, priority }) {
}
function generateSitemap() {
+ const routes = buildRoutes();
const sitemap = [
'',
'',
- ...ROUTES.map(renderUrl),
+ ...routes.map(renderUrl),
'',
'',
].join('\n');
diff --git a/web/src/components/Layout.astro b/web/src/components/Layout.astro
index abd95e74..1c36d8b3 100644
--- a/web/src/components/Layout.astro
+++ b/web/src/components/Layout.astro
@@ -4,11 +4,45 @@ import '../styles/global.css';
interface Props {
title: string;
description: string;
+ canonicalPath?: string;
+ schema?: Record | Array>;
}
-const { title, description } = Astro.props;
+const { title, description, canonicalPath = '/', schema } = Astro.props;
const siteUrl = 'https://openflowkit.com';
+const canonicalUrl = new URL(canonicalPath, siteUrl).toString();
const ogImage = `${siteUrl}/og-image.png`;
+const baseSchemas = [
+ {
+ '@context': 'https://schema.org',
+ '@type': 'SoftwareApplication',
+ name: 'OpenFlowKit',
+ description,
+ url: canonicalUrl,
+ applicationCategory: 'DesignApplication',
+ operatingSystem: 'Web',
+ offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+ license: 'https://opensource.org/licenses/MIT',
+ },
+ {
+ '@context': 'https://schema.org',
+ '@type': 'Organization',
+ name: 'OpenFlowKit',
+ url: siteUrl,
+ logo: `${siteUrl}/Logo_openflowkit.svg`,
+ sameAs: ['https://github.com/Vrun-design/openflowkit'],
+ },
+ {
+ '@context': 'https://schema.org',
+ '@type': 'WebSite',
+ name: 'OpenFlowKit',
+ url: siteUrl,
+ description:
+ 'Open-source, local-first AI diagramming for architecture diagrams, flowcharts, system design, and export workflows.',
+ },
+];
+const extraSchemas = schema ? (Array.isArray(schema) ? schema : [schema]) : [];
+const schemas = [...baseSchemas, ...extraSchemas];
---
@@ -18,11 +52,12 @@ const ogImage = `${siteUrl}/og-image.png`;
{title}
-
+
-
+
+
@@ -30,18 +65,8 @@ const ogImage = `${siteUrl}/og-image.png`;
-
-
+
+
diff --git a/web/src/components/landing/AnswerEngineSection.tsx b/web/src/components/landing/AnswerEngineSection.tsx
new file mode 100644
index 00000000..b85a6a67
--- /dev/null
+++ b/web/src/components/landing/AnswerEngineSection.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+
+const proofPoints = [
+ {
+ title: 'Local-first by default',
+ description:
+ 'Your diagrams, workspace state, and AI-related browser data stay on-device unless you choose to remove them.',
+ },
+ {
+ title: 'Useful for real architecture work',
+ description:
+ 'OpenFlowKit supports freeform diagramming, architecture mapping, AI-assisted drafting, structured imports, and handoff exports.',
+ },
+ {
+ title: 'Built for editable output',
+ description:
+ 'You can keep iterating in the canvas, export to Mermaid, or hand work off through SVG, PNG, and Figma-friendly paths.',
+ },
+];
+
+const faqs = [
+ {
+ question: 'What is OpenFlowKit?',
+ answer:
+ 'OpenFlowKit is an open-source, local-first diagramming tool for architecture diagrams, flowcharts, and AI-assisted visual workflows.',
+ },
+ {
+ question: 'Who is OpenFlowKit for?',
+ answer:
+ 'It is designed for engineers, architects, technical founders, and product teams who need editable diagrams instead of static AI image output.',
+ },
+ {
+ question: 'Does OpenFlowKit require an account?',
+ answer:
+ 'No. You can open the app and start diagramming without creating an account.',
+ },
+ {
+ question: 'How does AI work in OpenFlowKit?',
+ answer:
+ 'AI is optional. You bring your own API key in the settings modal, then use AI to draft, refine, or expand diagrams inside the editor.',
+ },
+];
+
+export function AnswerEngineSection(): React.ReactElement {
+ return (
+
+
+
+
+
+ Why OpenFlowKit
+
+
+ A local-first AI diagramming tool built for editable technical work.
+
+
+ OpenFlowKit helps teams turn rough system ideas into diagrams they can keep
+ editing, exporting, and sharing. It is designed for architecture flows, system
+ design, process mapping, and other diagram-heavy workflows where static output is
+ not enough.
+
- OpenFlowKit is 100% open source. There is no "Enterprise Edition" hidden
+ OpenFlowKit is 100% free & open source. There is no "Enterprise Edition" hidden
behind a sales call.
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
index 7386827a..c8b1a571 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -1,11 +1,52 @@
---
import Layout from '../components/Layout.astro';
import { LandingPage } from '../components/landing/LandingPage';
+
+const faqSchema = {
+ '@context': 'https://schema.org',
+ '@type': 'FAQPage',
+ mainEntity: [
+ {
+ '@type': 'Question',
+ name: 'What is OpenFlowKit?',
+ acceptedAnswer: {
+ '@type': 'Answer',
+ text: 'OpenFlowKit is an open-source, local-first diagramming tool for architecture diagrams, flowcharts, and AI-assisted visual workflows.',
+ },
+ },
+ {
+ '@type': 'Question',
+ name: 'Who is OpenFlowKit for?',
+ acceptedAnswer: {
+ '@type': 'Answer',
+ text: 'OpenFlowKit is for engineers, architects, technical founders, and product teams who need editable diagrams instead of static AI image output.',
+ },
+ },
+ {
+ '@type': 'Question',
+ name: 'Does OpenFlowKit require an account?',
+ acceptedAnswer: {
+ '@type': 'Answer',
+ text: 'No. You can start diagramming in OpenFlowKit without creating an account.',
+ },
+ },
+ {
+ '@type': 'Question',
+ name: 'How does AI work in OpenFlowKit?',
+ acceptedAnswer: {
+ '@type': 'Answer',
+ text: 'AI is optional. You add your own API key in settings, then use AI inside the editor to draft, refine, or expand diagrams.',
+ },
+ },
+ ],
+};
---