dtoro/zui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

switch to plantuml

Browse Source
This commit is contained in:
authentik Default Admin
2026-03-07 00:13:14 +01:00
parent b7aa1079d4
commit cb89557998
6 changed files with 250 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.tsx
View File

@@ -36,7 +36,7 @@ const initialNodes: Node[] = [
{
id: 'config-1',
position: { x: 50, y: 50 },
data: { yaml: "# example:\nmessage: Hello from config" },
data: { plantuml: '@startuml\nactor User\nparticipant "Render" as R\nUser -> R : config\n@enduml\n' },
type: 'config',
},
{
@@ -116,7 +116,7 @@ export default function App() {
function: 'function',
}
const dataMap: Record<string, any> = {
config: { yaml: '# Enter YAML here\n', title: `config-${id}` },
config: { plantuml: '@startuml\n\n@enduml\n', title: `config-${id}` },
render: {},
variable: { value: '', valueType: 'string' },
function: { body: '// args[0], args[1], ...\nreturn args[0];' },

18
src/components/graph/ConfigNode.tsx
View File

@@ -1,7 +1,7 @@
import React, { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
import CodeMirror from '@uiw/react-codemirror'
import { yaml } from '@codemirror/lang-yaml'
import FlowContext from '../../lib/flowContext'
import { plantumlLanguage } from '../../lib/plantumlLanguage'
import { useTheme } from '../../lib/themeContext'
import {
BaseNode,
@@ -29,11 +29,11 @@ type Props = {
}
export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
const [value, setValue] = useState<string>(data?.yaml ?? '# Enter YAML here\n')
const [value, setValue] = useState<string>(data?.plantuml ?? '@startuml\n\n@enduml\n')
const { theme } = useTheme()
const ctx = useContext(FlowContext)
const setNodes = ctx?.setNodes
const storedYaml = ctx?.nodes?.find((n: any) => n.id === id)?.data?.yaml ?? ''
const storedPlantuml = ctx?.nodes?.find((n: any) => n.id === id)?.data?.plantuml ?? ''
const editorRef = useRef<unknown>(null)
@@ -46,7 +46,7 @@ export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
useEffect(() => {
if (setNodes) {
setNodes((nds: any[]) => nds.map((n) => (n.id === id ? { ...n, data: { ...n.data, yaml: value } } : n)))
setNodes((nds: any[]) => nds.map((n) => (n.id === id ? { ...n, data: { ...n.data, plantuml: value } } : n)))
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
@@ -55,7 +55,7 @@ export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
(val: string) => {
setValue(val)
if (setNodes) {
setNodes((nds: any[]) => nds.map((n) => (n.id === id ? { ...n, data: { ...n.data, yaml: val } } : n)))
setNodes((nds: any[]) => nds.map((n) => (n.id === id ? { ...n, data: { ...n.data, plantuml: val } } : n)))
}
},
[id, setNodes]
@@ -93,7 +93,7 @@ export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
const insertIncludeFromNode = useCallback(
(sourceNode: any, mode: 'prepend' | 'append' | 'cursor') => {
const ref = `${sourceNode.id}.yaml`
const ref = `${sourceNode.id}.puml`
insertAt(`!include ${ref}\n`, mode)
},
[insertAt]
@@ -113,13 +113,13 @@ export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
[insertAt]
)
const extensions = useMemo(() => [yaml()], [])
const extensions = useMemo(() => [plantumlLanguage.extension], [])
return (
<BaseNode className="w-80">
<BaseNodeHeader className="border-b">
<ScrollText className="size-4" />
<BaseNodeHeaderTitle>{id}.yml</BaseNodeHeaderTitle>
<BaseNodeHeaderTitle>{id}.puml</BaseNodeHeaderTitle>
</BaseNodeHeader>
<BaseNodeContent>
@@ -210,7 +210,7 @@ export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
</BaseNodeContent>
<BaseNodeFooter>
<div className="w-full text-xs text-muted-foreground">{storedYaml ? `${storedYaml.length} chars` : 'none'}</div>
<div className="w-full text-xs text-muted-foreground">{storedPlantuml ? `${storedPlantuml.length} chars` : 'none'}</div>
</BaseNodeFooter>
<InputHandle id="ain" />

290
src/components/graph/RenderingNode.tsx
View File

@@ -1,6 +1,6 @@
import { memo, useContext, useEffect, useMemo, useState } from 'react'
import yaml from 'js-yaml'
import { memo, useContext, useEffect, useMemo, useRef, useState } from 'react'
import FlowContext from '../../lib/flowContext'
import { useTheme } from '../../lib/themeContext'
import { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia } from '../ui/empty'
import {
BaseNode,
@@ -12,14 +12,63 @@ import {
import { Sparkles } from 'lucide-react'
import { InputHandle, OutputHandle } from './NodeHandles'
// Use relative URL so Vite dev proxy (and optional prod proxy) avoids CORS
const KROKI_PLANTUML_SVG = '/api/kroki/plantuml/svg'
type Props = {
id: string
data?: any
}
const DARK_SKINPARAMS = `
skinparam backgroundColor #1e1e1e
skinparam defaultFontColor #e0e0e0
skinparam shadowing false
skinparam ArrowColor #b0b0b0
skinparam ArrowFontColor #e0e0e0
skinparam ActivityBackgroundColor #2d2d2d
skinparam ActivityBorderColor #6b6b6b
skinparam ActivityDiamondBackgroundColor #2d2d2d
skinparam ActivityDiamondBorderColor #6b6b6b
skinparam SequenceParticipantBackgroundColor #2d2d2d
skinparam SequenceParticipantBorderColor #6b6b6b
skinparam SequenceLifeLineBorderColor #6b6b6b
skinparam SequenceBoxBackgroundColor #252525
skinparam SequenceBoxBorderColor #6b6b6b
skinparam SequenceActorBackgroundColor #2d2d2d
skinparam SequenceActorBorderColor #6b6b6b
skinparam ClassBackgroundColor #2d2d2d
skinparam ClassBorderColor #6b6b6b
skinparam ComponentBackgroundColor #2d2d2d
skinparam ComponentBorderColor #6b6b6b
skinparam StateBackgroundColor #2d2d2d
skinparam StateBorderColor #6b6b6b
skinparam partitionBorderColor #6b6b6b
skinparam sequence {
ArrowColor #b0b0b0
LifeLineBorderColor #6b6b6b
LifeLineBackgroundColor #2d2d2d
ParticipantBorderColor #6b6b6b
ActorBorderColor #6b6b6b
BoxBorderColor #6b6b6b
}
skinparam activity {
ArrowColor #b0b0b0
BorderColor #6b6b6b
DiamondBorderColor #6b6b6b
}
skinparam class {
ArrowColor #b0b0b0
BorderColor #6b6b6b
}
`
export const RenderingNode = memo(function RenderingNode({ id }: Props) {
const [output, setOutput] = useState<string>('')
const [svgContent, setSvgContent] = useState<string | null>(null)
const [error, setError] = useState<null | { kind: string; message: string }>(null)
const [loading, setLoading] = useState(false)
const runIdRef = useRef(0)
const { theme } = useTheme()
const ctx = useContext(FlowContext)
const nodes = ctx?.nodes ?? []
@@ -31,14 +80,14 @@ export const RenderingNode = memo(function RenderingNode({ id }: Props) {
const incomingIds = useMemo(() => incomingEdges.map((e: any) => e.source).sort(), [incomingEdges])
const srcId = incomingIds.length > 0 ? incomingIds[0] : null
const srcNode = nodes.find((n: any) => n.id === srcId)
const yamlText = srcNode && srcNode.type === 'config' ? srcNode?.data?.yaml ?? '' : ''
const plantumlText = srcNode && srcNode.type === 'config' ? srcNode?.data?.plantuml ?? '' : ''
const srcData = srcNode?.data ?? {}
const configSignature = useMemo(
() =>
nodes
.filter((n: any) => n.type === 'config')
.map((n: any) => `${n.id}:${n.data?.title ?? ''}:${n.data?.yaml ?? ''}`)
.map((n: any) => `${n.id}:${n.data?.title ?? ''}:${n.data?.plantuml ?? ''}`)
.join('|'),
[nodes]
)
@@ -71,118 +120,148 @@ export const RenderingNode = memo(function RenderingNode({ id }: Props) {
)
useEffect(() => {
// debug
// eslint-disable-next-line no-console
console.debug('RenderingNode:selection', {
id,
incomingIds,
srcNode: srcNode ? { id: srcNode.id, type: srcNode.type, yaml: (srcNode.data?.yaml ?? '').slice(0, 60) } : null,
})
if (!yamlText) {
if (!plantumlText) {
if (incomingIds.length === 0) {
setOutput('')
setSvgContent(null)
setError(null)
setLoading(false)
return
}
setOutput('')
setError({ kind: 'no-yaml', message: 'No YAML found on connected configuration node' })
setSvgContent(null)
setError({ kind: 'no-plantuml', message: 'No PlantUML found on connected configuration node' })
setLoading(false)
return
}
try {
const configIdsUsed = new Set<string>()
runIdRef.current += 1
const thisRunId = runIdRef.current
let cancelled = false
const resolveIncludes = (text: string, visited = new Set<string>()): string => {
const includeRegex = /^(\s*)!include\s+([^\s]+)\s*$/gm
return text.replace(includeRegex, (match: string, indent: string, ref: string) => {
const refName = ref.endsWith('.yaml') ? ref.slice(0, -5) : ref
const refNode = nodes.find((n: any) => n.id === refName || n.data?.title === refName)
if (!refNode) throw new Error(`Included node not found: ${ref}`)
if (visited.has(refNode.id)) throw new Error(`Circular include detected: ${ref}`)
const run = async () => {
setLoading(true)
setError(null)
try {
const configIdsUsed = new Set<string>()
const isReachable = (startId: string, targetId: string) => {
const q: string[] = [startId]
const seen = new Set<string>([startId])
while (q.length) {
const cur = q.shift()!
if (cur === targetId) return true
for (const e of edges) {
if (e.source === cur && !seen.has(e.target)) {
seen.add(e.target)
q.push(e.target)
const resolveIncludes = (text: string, visited = new Set<string>()): string => {
const includeRegex = /^(\s*)!include\s+([^\s]+)\s*$/gm
return text.replace(includeRegex, (match: string, indent: string, ref: string) => {
const refName = ref.endsWith('.puml') ? ref.slice(0, -5) : ref
const refNode = nodes.find((n: any) => n.id === refName || n.data?.title === refName)
if (!refNode) throw new Error(`Included node not found: ${ref}`)
if (visited.has(refNode.id)) throw new Error(`Circular include detected: ${ref}`)
const isReachable = (startId: string, targetId: string) => {
const q: string[] = [startId]
const seen = new Set<string>([startId])
while (q.length) {
const cur = q.shift()!
if (cur === targetId) return true
for (const e of edges) {
if (e.source === cur && !seen.has(e.target)) {
seen.add(e.target)
q.push(e.target)
}
}
}
return false
}
return false
}
if (!isReachable(refNode.id, id)) throw new Error(`Included node not connected to renderer: ${ref}`)
if (!isReachable(refNode.id, id)) throw new Error(`Included node not connected to renderer: ${ref}`)
visited.add(refNode.id)
if (refNode.type === 'config') configIdsUsed.add(refNode.id)
const includedRaw = String(refNode.data?.yaml ?? '')
const resolved = resolveIncludes(includedRaw, visited)
visited.delete(refNode.id)
visited.add(refNode.id)
if (refNode.type === 'config') configIdsUsed.add(refNode.id)
const includedRaw = String(refNode.data?.plantuml ?? '')
const resolved = resolveIncludes(includedRaw, visited)
visited.delete(refNode.id)
const indented = resolved
.split('\n')
.map((line: string) => (line === '' ? '' : indent + line))
.join('\n')
return indented
})
}
const indented = resolved
.split('\n')
.map((line: string) => (line === '' ? '' : indent + line))
.join('\n')
return indented
})
}
if (srcId && srcNode?.type === 'config') configIdsUsed.add(srcId)
if (srcId && srcNode?.type === 'config') configIdsUsed.add(srcId)
const resolvedYaml = resolveIncludes(yamlText)
const resolvedPlantuml = resolveIncludes(plantumlText)
const varMap: Record<string, string> = {}
for (const e of edges) {
if (configIdsUsed.has(e.target)) {
const src = nodes.find((n: any) => n.id === e.source)
if (src?.type === 'variable') {
const v = src.data?.value
varMap[src.id] = v === undefined || v === null ? '' : String(v)
const varMap: Record<string, string> = {}
for (const e of edges) {
if (configIdsUsed.has(e.target)) {
const src = nodes.find((n: any) => n.id === e.source)
if (src?.type === 'variable') {
const v = src.data?.value
varMap[src.id] = v === undefined || v === null ? '' : String(v)
}
}
}
}
const resolveFunctionCalls = (text: string): string => {
const fnCallRegex = /\$\{([\w-]+)\s*\(([^)]*)\)\}/g
return text.replace(fnCallRegex, (match, funcId: string, argsStr: string) => {
const fnNode = nodes.find((n: any) => n.id === funcId && n.type === 'function')
if (!fnNode) return match
const body = fnNode.data?.body ?? 'return args[0];'
const argIds = argsStr.split(',').map((s: string) => s.trim()).filter(Boolean)
const argValues = argIds.map((argId: string) => varMap[argId] ?? '')
try {
const fn = new Function('args', body)
const result = fn(argValues)
if (result === undefined || result === null) return ''
if (typeof result === 'string' || typeof result === 'number' || typeof result === 'boolean') return String(result)
return String(result)
} catch (err) {
return match
}
const resolveFunctionCalls = (text: string): string => {
const fnCallRegex = /\$\{([\w-]+)\s*\(([^)]*)\)\}/g
return text.replace(fnCallRegex, (match, funcId: string, argsStr: string) => {
const fnNode = nodes.find((n: any) => n.id === funcId && n.type === 'function')
if (!fnNode) return match
const body = fnNode.data?.body ?? 'return args[0];'
const argIds = argsStr.split(',').map((s: string) => s.trim()).filter(Boolean)
const argValues = argIds.map((argId: string) => varMap[argId] ?? '')
try {
const fn = new Function('args', body)
const result = fn(argValues)
if (result === undefined || result === null) return ''
if (typeof result === 'string' || typeof result === 'number' || typeof result === 'boolean') return String(result)
return String(result)
} catch {
return match
}
})
}
const resolveVariables = (text: string): string =>
text.replace(/\$\{([^}]+)\}/g, (_, varId: string) => varMap[varId.trim()] ?? '')
const afterFunctions = resolveFunctionCalls(resolvedPlantuml)
let resolvedWithVars = resolveVariables(afterFunctions)
if (theme === 'dark') {
resolvedWithVars = resolvedWithVars.replace(
/^(\s*@startuml\s*\n)/i,
`$1${DARK_SKINPARAMS}\n`
)
}
const res = await fetch(KROKI_PLANTUML_SVG, {
method: 'POST',
headers: { 'Content-Type': 'text/plain' },
body: resolvedWithVars,
})
if (cancelled || thisRunId !== runIdRef.current) return
if (!res.ok) {
const errText = await res.text()
throw new Error(res.status === 400 ? errText || 'Invalid PlantUML' : `Kroki error: ${res.status}`)
}
const svg = await res.text()
if (thisRunId !== runIdRef.current) return
setSvgContent(svg)
setError(null)
} catch (err: any) {
if (cancelled || thisRunId !== runIdRef.current) return
const msg = err?.message ?? 'PlantUML render error'
setSvgContent(null)
setError({ kind: 'render', message: msg })
} finally {
if (!cancelled && thisRunId === runIdRef.current) setLoading(false)
}
const resolveVariables = (text: string): string =>
text.replace(/\$\{([^}]+)\}/g, (_, varId: string) => varMap[varId.trim()] ?? '')
const afterFunctions = resolveFunctionCalls(resolvedYaml)
const resolvedWithVars = resolveVariables(afterFunctions)
const parsed = yaml.load(resolvedWithVars)
const newOutput = JSON.stringify(parsed, null, 2)
setError(null)
setOutput((prev) => (prev === newOutput ? prev : newOutput))
} catch (err: any) {
const msg = 'YAML parse/include error: ' + err.message
setOutput('')
setError({ kind: 'parse', message: msg })
}
}, [id, incomingIds.join(','), yamlText, configSignature, edgesSignature, variablesSignature, functionsSignature])
run()
return () => { cancelled = true }
// Only re-run when inputs that affect the resolved diagram change (signatures + source + theme).
// Do not depend on nodes/edges refs to avoid flicker from unnecessary re-renders.
}, [id, theme, plantumlText, configSignature, edgesSignature, variablesSignature, functionsSignature])
return (
<BaseNode className="w-96">
@@ -199,7 +278,7 @@ export const RenderingNode = memo(function RenderingNode({ id }: Props) {
<Sparkles className="size-6" />
</EmptyMedia>
<EmptyTitle>No configuration connected</EmptyTitle>
<EmptyDescription>Connect a Configuration node or create one. The renderer will display parsed YAML.</EmptyDescription>
<EmptyDescription>Connect a Configuration node or create one. The renderer will display the PlantUML diagram.</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<button
@@ -211,7 +290,7 @@ export const RenderingNode = memo(function RenderingNode({ id }: Props) {
const thisNode = nodes.find((n: any) => n.id === id)
const pos = thisNode?.position ?? { x: 0, y: 0 }
const newPos = { x: pos.x - 220, y: pos.y }
const newNode = { id: nid, type: 'config', position: newPos, data: { yaml: '# Enter YAML\n', title: `config-${nid}` } }
const newNode = { id: nid, type: 'config', position: newPos, data: { plantuml: '@startuml\n\n@enduml\n', title: `config-${nid}` } }
setNodes((nds: any[]) => nds.concat(newNode))
const edgeId = `e-${nid}-${id}`
setEdges((eds: any[]) => eds.concat({ id: edgeId, source: nid, target: id }))
@@ -225,17 +304,24 @@ export const RenderingNode = memo(function RenderingNode({ id }: Props) {
srcData?.renderError ? (
srcData.renderError(error)
) : srcData?.errorHtml ? (
<div className="p-3 text-xs text-red-700" dangerouslySetInnerHTML={{ __html: String(srcData.errorHtml) }} />
<div className="p-3 text-xs text-red-700 dark:text-red-400" dangerouslySetInnerHTML={{ __html: String(srcData.errorHtml) }} />
) : (
<div className="p-3 text-xs text-red-700">{error.message}</div>
<div className="p-3 text-xs text-red-700 dark:text-red-400">{error.message}</div>
)
) : (
<pre className="text-xs text-foreground max-h-48 overflow-auto">{output}</pre>
)}
) : loading ? (
<div className="flex min-h-[120px] items-center justify-center text-xs text-muted-foreground">Rendering…</div>
) : svgContent ? (
<div
className="min-h-[120px] w-full overflow-auto rounded border border-input bg-white dark:bg-gray-900 [&_svg]:max-w-full [&_svg]:h-auto"
dangerouslySetInnerHTML={{ __html: svgContent }}
/>
) : null}
</BaseNodeContent>
<BaseNodeFooter>
<div className="w-full text-xs text-muted-foreground">Parsed YAML output</div>
<div className="w-full text-xs text-muted-foreground">
{svgContent ? 'PlantUML diagram' : error ? 'Error' : '—'}
</div>
</BaseNodeFooter>
<InputHandle id="ain" />
@@ -246,4 +332,4 @@ export const RenderingNode = memo(function RenderingNode({ id }: Props) {
RenderingNode.displayName = 'RenderingNode'
export default RenderingNode
export default RenderingNode

41
src/lib/plantumlLanguage.ts Normal file
View File

@@ -0,0 +1,41 @@
import { StreamLanguage } from '@codemirror/language'
/** Simple PlantUML stream parser for syntax highlighting in CodeMirror */
const plantumlParser = StreamLanguage.define({
name: 'plantuml',
token(stream) {
// Single-quote line comment (PlantUML)
if (stream.match(/^'/)) {
stream.skipToEnd()
return 'comment'
}
// Double-quoted string
if (stream.match(/^"/)) {
let escaped = false
while (!stream.eol()) {
if (escaped) {
escaped = false
stream.next()
continue
}
const ch = stream.next()
if (ch === '\\') escaped = true
else if (ch === '"') break
}
return 'string'
}
// @directives (@startuml, @enduml, etc.)
if (stream.match(/^@\w+/)) return 'meta'
// Skip whitespace
if (stream.eatSpace()) return null
// Arrows and connectors
if (stream.match(/^->>?|<-<?|-->>?|<<--?|<-?>/)) return 'keyword'
// Keywords (participant, actor, as, title, etc.)
if (stream.match(/^(participant|actor|as|title|autonumber|left|right|of|over|activate|deactivate|destroy|create|group|opt|alt|else|loop|par|end|note|legend|skinparam|start|stop|if|endif|elseif|while|endwhile|repeat|until|switch|case|endswitch|class|interface|enum|package|namespace|abstract|static|extends|implements)\b/i)) return 'keyword'
// Any other character (identifier, punctuation, etc.)
stream.next()
return null
},
})
export const plantumlLanguage = plantumlParser