help

src/lib/nodeHelp.tsx

@@ -0,0 +1,84 @@
+import type React from 'react'
+
+export type NodeType = 'config' | 'render' | 'variable' | 'function'
+
+export type NodeHelpEntry = {
+    title: string
+    content: React.ReactNode
+}
+
+const Code = ({ children }: { children: React.ReactNode }) => (
+    <code className="rounded bg-muted px-1 py-0.5 text-xs font-mono">{children}</code>
+)
+
+const Section = ({ title, children }: { title: string; children: React.ReactNode }) => (
+    <div className="mt-3 first:mt-0">
+        <h4 className="text-xs font-semibold text-foreground">{title}</h4>
+        <div className="mt-1 text-xs text-muted-foreground">{children}</div>
+    </div>
+)
+
+export const NODE_HELP: Record<NodeType, NodeHelpEntry> = {
+    config: {
+        title: 'Config node',
+        content: (
+            <>
+                <Section title="How to use">
+                    <p>Config nodes hold PlantUML + Nunjucks template content. Connect one config to a Render node to display the diagram. Use the editor to write <Code>@startuml</Code> blocks and Nunjucks tags (<Code>{'{{ }}'}</Code>, <Code>{'{% %}'}</Code>).</p>
+                </Section>
+                <Section title="Using in another node">
+                    <p>From another config, reference this template:</p>
+                    <ul className="list-disc pl-4 mt-1 space-y-0.5">
+                        <li><Code>{'{% extends "configId" %}'}</Code> — inherit layout</li>
+                        <li><Code>{'{% include "configId" %}'}</Code> — inline content</li>
+                        <li><Code>{'{% import "configId" as alias %}'}</Code> — use as macro namespace</li>
+                    </ul>
+                    <p className="mt-2">Replace <Code>configId</Code> with this node’s id or its title. Connect variables/functions to this config; they are available as <Code>{'{{ varId }}'}</Code> and <Code>{'{{ x | fnId }}'}</Code> in the template.</p>
+                </Section>
+            </>
+        ),
+    },
+    render: {
+        title: 'Renderer node',
+        content: (
+            <>
+                <Section title="How to use">
+                    <p>Connect a single Config node (input) to this Render node. It resolves the config’s PlantUML + Nunjucks (variables, function filters, extends/include), sends the result to the diagram service, and shows the SVG here.</p>
+                </Section>
+                <Section title="Using in another node">
+                    <p>Renderer nodes are terminal: they only consume configs. They are not referenced from other nodes. To reuse a diagram, reference the Config node from another Config (extends/include), then connect that config to a Render node.</p>
+                </Section>
+            </>
+        ),
+    },
+    variable: {
+        title: 'Variable node',
+        content: (
+            <>
+                <Section title="How to use">
+                    <p>Variables hold a value (string, number, or boolean). Connect a Variable node to a Config node to expose it in that config’s template.</p>
+                </Section>
+                <Section title="Using in another node">
+                    <p>In a Config template connected to this variable, use <Code>{'{{ '}<em>nodeId</em>{' }}'}</Code> where <em>nodeId</em> is this node’s id. Example: if the variable node id is <Code>var_001</Code>, write <Code>{'{{ var_001 }}'}</Code> in the config.</p>
+                </Section>
+            </>
+        ),
+    },
+    function: {
+        title: 'Function node',
+        content: (
+            <>
+                <Section title="How to use">
+                    <p>Functions are Nunjucks custom filters. Write a body using either named parameters (<Code>function(num, x, kwargs) &#123; ... &#125;</Code>) or the <Code>args</Code> array. Connect this node to a Config to use the filter in that config’s template.</p>
+                </Section>
+                <Section title="Using in another node">
+                    <p>In a Config template, use the filter syntax: <Code>{'{{ value | '}<em>nodeId</em>{' }}'}</Code> or <Code>{'{{ value | '}<em>nodeId</em>{'(arg1, key=val) }}'}</Code>. The first argument is the value before <Code>|</Code>; extra arguments and keyword args are passed as in Nunjucks. Return a value or a Promise for async filters.</p>
+                </Section>
+            </>
+        ),
+    },
+}
+
+export function getNodeHelp(nodeType: NodeType): NodeHelpEntry {
+    return NODE_HELP[nodeType] ?? { title: nodeType, content: null }
+}