Add Help Menu in NodeLibrarySidebarTab (#3922)

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Claude <noreply@anthropic.com>

src/components/graph/SelectionToolbox.vue

@@ -18,6 +18,7 @@
       :key="command.id"
       :command="command"
     />
+    <HelpButton />
   </Panel>
 </template>
 
@@ -30,6 +31,7 @@ import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerBu
 import DeleteButton from '@/components/graph/selectionToolbox/DeleteButton.vue'
 import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
 import ExtensionCommandButton from '@/components/graph/selectionToolbox/ExtensionCommandButton.vue'
+import HelpButton from '@/components/graph/selectionToolbox/HelpButton.vue'
 import MaskEditorButton from '@/components/graph/selectionToolbox/MaskEditorButton.vue'
 import PinButton from '@/components/graph/selectionToolbox/PinButton.vue'
 import RefreshButton from '@/components/graph/selectionToolbox/RefreshButton.vue'

src/components/graph/selectionToolbox/HelpButton.vue

@@ -0,0 +1,49 @@
+<template>
+  <Button
+    v-show="nodeDef"
+    v-tooltip.top="{
+      value: $t('g.help'),
+      showDelay: 1000
+    }"
+    class="help-button"
+    text
+    icon="pi pi-question-circle"
+    severity="secondary"
+    @click="showHelp"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
+import { useCanvasStore } from '@/stores/graphStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
+import { isLGraphNode } from '@/utils/litegraphUtil'
+
+const canvasStore = useCanvasStore()
+const nodeDefStore = useNodeDefStore()
+const sidebarTabStore = useSidebarTabStore()
+const nodeHelpStore = useNodeHelpStore()
+const { id: nodeLibraryTabId } = useNodeLibrarySidebarTab()
+
+const nodeDef = computed<ComfyNodeDefImpl | null>(() => {
+  if (canvasStore.selectedItems.length !== 1) return null
+  const item = canvasStore.selectedItems[0]
+  if (!isLGraphNode(item)) return null
+  return nodeDefStore.fromLGraphNode(item)
+})
+
+const showHelp = () => {
+  const def = nodeDef.value
+  if (!def) return
+  if (sidebarTabStore.activeSidebarTabId !== nodeLibraryTabId) {
+    sidebarTabStore.toggleSidebarTab(nodeLibraryTabId)
+  }
+  nodeHelpStore.openHelp(def)
+}
+</script>

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -1,113 +1,124 @@
 <template>
-  <SidebarTabTemplate
-    :title="$t('sideToolbar.nodeLibrary')"
-    class="bg-[var(--p-tree-background)]"
-  >
-    <template #tool-buttons>
-      <Button
-        v-tooltip.bottom="$t('g.newFolder')"
-        class="new-folder-button"
-        icon="pi pi-folder-plus"
-        text
-        severity="secondary"
-        @click="nodeBookmarkTreeExplorerRef?.addNewBookmarkFolder()"
-      />
-      <Button
-        v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.groupBy')"
-        :icon="selectedGroupingIcon"
-        text
-        severity="secondary"
-        @click="groupingPopover?.toggle($event)"
-      />
-      <Button
-        v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.sortMode')"
-        :icon="selectedSortingIcon"
-        text
-        severity="secondary"
-        @click="sortingPopover?.toggle($event)"
-      />
-      <Button
-        v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.resetView')"
-        icon="pi pi-refresh"
-        text
-        severity="secondary"
-        @click="resetOrganization"
-      />
-      <Popover ref="groupingPopover">
-        <div class="flex flex-col gap-1 p-2">
-          <Button
-            v-for="option in groupingOptions"
-            :key="option.id"
-            :icon="option.icon"
-            :label="$t(option.label)"
-            text
-            :severity="
-              selectedGroupingId === option.id ? 'primary' : 'secondary'
-            "
-            class="justify-start"
-            @click="selectGrouping(option.id)"
+  <div class="h-full">
+    <SidebarTabTemplate
+      v-if="!isHelpOpen"
+      :title="$t('sideToolbar.nodeLibrary')"
+      class="bg-[var(--p-tree-background)]"
+    >
+      <template #tool-buttons>
+        <Button
+          v-tooltip.bottom="$t('g.newFolder')"
+          class="new-folder-button"
+          icon="pi pi-folder-plus"
+          text
+          severity="secondary"
+          @click="nodeBookmarkTreeExplorerRef?.addNewBookmarkFolder()"
+        />
+        <Button
+          v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.groupBy')"
+          :icon="selectedGroupingIcon"
+          text
+          severity="secondary"
+          @click="groupingPopover?.toggle($event)"
+        />
+        <Button
+          v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.sortMode')"
+          :icon="selectedSortingIcon"
+          text
+          severity="secondary"
+          @click="sortingPopover?.toggle($event)"
+        />
+        <Button
+          v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.resetView')"
+          icon="pi pi-refresh"
+          text
+          severity="secondary"
+          @click="resetOrganization"
+        />
+        <Popover ref="groupingPopover">
+          <div class="flex flex-col gap-1 p-2">
+            <Button
+              v-for="option in groupingOptions"
+              :key="option.id"
+              :icon="option.icon"
+              :label="$t(option.label)"
+              text
+              :severity="
+                selectedGroupingId === option.id ? 'primary' : 'secondary'
+              "
+              class="justify-start"
+              @click="selectGrouping(option.id)"
+            />
+          </div>
+        </Popover>
+        <Popover ref="sortingPopover">
+          <div class="flex flex-col gap-1 p-2">
+            <Button
+              v-for="option in sortingOptions"
+              :key="option.id"
+              :icon="option.icon"
+              :label="$t(option.label)"
+              text
+              :severity="
+                selectedSortingId === option.id ? 'primary' : 'secondary'
+              "
+              class="justify-start"
+              @click="selectSorting(option.id)"
+            />
+          </div>
+        </Popover>
+      </template>
+      <template #header>
+        <div>
+          <SearchBox
+            v-model:modelValue="searchQuery"
+            class="node-lib-search-box p-2 2xl:p-4"
+            :placeholder="$t('g.searchNodes') + '...'"
+            filter-icon="pi pi-filter"
+            :filters
+            @search="handleSearch"
+            @show-filter="($event) => searchFilter?.toggle($event)"
+            @remove-filter="onRemoveFilter"
           />
-        </div>
-      </Popover>
-      <Popover ref="sortingPopover">
-        <div class="flex flex-col gap-1 p-2">
-          <Button
-            v-for="option in sortingOptions"
-            :key="option.id"
-            :icon="option.icon"
-            :label="$t(option.label)"
-            text
-            :severity="
-              selectedSortingId === option.id ? 'primary' : 'secondary'
-            "
-            class="justify-start"
-            @click="selectSorting(option.id)"
-          />
-        </div>
-      </Popover>
-    </template>
-    <template #header>
-      <SearchBox
-        v-model:modelValue="searchQuery"
-        class="node-lib-search-box p-2 2xl:p-4"
-        :placeholder="$t('g.searchNodes') + '...'"
-        filter-icon="pi pi-filter"
-        :filters
-        @search="handleSearch"
-        @show-filter="($event) => searchFilter?.toggle($event)"
-        @remove-filter="onRemoveFilter"
-      />
 
-      <Popover ref="searchFilter" class="ml-[-13px]">
-        <NodeSearchFilter @add-filter="onAddFilter" />
-      </Popover>
-    </template>
-    <template #body>
-      <NodeBookmarkTreeExplorer
-        ref="nodeBookmarkTreeExplorerRef"
-        :filtered-node-defs="filteredNodeDefs"
-      />
-      <Divider
-        v-show="nodeBookmarkStore.bookmarks.length > 0"
-        type="dashed"
-        class="m-2"
-      />
-      <TreeExplorer
-        v-model:expandedKeys="expandedKeys"
-        class="node-lib-tree-explorer"
-        :root="renderedRoot"
-      >
-        <template #node="{ node }">
-          <NodeTreeLeaf :node="node" />
-        </template>
-      </TreeExplorer>
-    </template>
-  </SidebarTabTemplate>
+          <Popover ref="searchFilter" class="ml-[-13px]">
+            <NodeSearchFilter @add-filter="onAddFilter" />
+          </Popover>
+        </div>
+      </template>
+      <template #body>
+        <div>
+          <NodeBookmarkTreeExplorer
+            ref="nodeBookmarkTreeExplorerRef"
+            :filtered-node-defs="filteredNodeDefs"
+            :open-node-help="openHelp"
+          />
+          <Divider
+            v-show="nodeBookmarkStore.bookmarks.length > 0"
+            type="dashed"
+            class="m-2"
+          />
+          <TreeExplorer
+            v-model:expandedKeys="expandedKeys"
+            class="node-lib-tree-explorer"
+            :root="renderedRoot"
+          >
+            <template #node="{ node }">
+              <NodeTreeLeaf :node="node" :open-node-help="openHelp" />
+            </template>
+          </TreeExplorer>
+        </div>
+      </template>
+    </SidebarTabTemplate>
+
+    <NodeHelpPage v-else :node="currentHelpNode!" @close="closeHelp" />
+  </div>
   <div id="node-library-node-preview-container" />
 </template>
 
 <script setup lang="ts">
 import { useLocalStorage } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
 import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import Popover from 'primevue/popover'
@@ -119,6 +130,7 @@ import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import NodePreview from '@/components/node/NodePreview.vue'
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
+import NodeHelpPage from '@/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue'
 import NodeTreeLeaf from '@/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue'
 import { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useLitegraphService } from '@/services/litegraphService'
@@ -129,6 +141,7 @@ import {
 } from '@/services/nodeOrganizationService'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
 import type {
   GroupingStrategyId,
   SortingStrategyId
@@ -141,6 +154,7 @@ import NodeBookmarkTreeExplorer from './nodeLibrary/NodeBookmarkTreeExplorer.vue
 
 const nodeDefStore = useNodeDefStore()
 const nodeBookmarkStore = useNodeBookmarkStore()
+const nodeHelpStore = useNodeHelpStore()
 const expandedKeys = ref<Record<string, boolean>>({})
 const { expandNode, toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
 
@@ -161,6 +175,9 @@ const selectedSortingId = useLocalStorage<SortingStrategyId>(
 
 const searchQuery = ref<string>('')
 
+const { currentHelpNode, isHelpOpen } = storeToRefs(nodeHelpStore)
+const { openHelp, closeHelp } = nodeHelpStore
+
 const groupingOptions = computed(() =>
   nodeOrganizationService.getGroupingStrategies().map((strategy) => ({
     id: strategy.id,

src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue

@@ -9,7 +9,7 @@
       <NodeTreeFolder :node="node" />
     </template>
     <template #node="{ node }">
-      <NodeTreeLeaf :node="node" />
+      <NodeTreeLeaf :node="node" :open-node-help="props.openNodeHelp" />
     </template>
   </TreeExplorer>
 
@@ -43,6 +43,7 @@ import type {
 
 const props = defineProps<{
   filteredNodeDefs: ComfyNodeDefImpl[]
+  openNodeHelp: (nodeDef: ComfyNodeDefImpl) => void
 }>()
 
 const expandedKeys = ref<Record<string, boolean>>({})

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="flex flex-col h-full bg-[var(--p-tree-background)] overflow-auto">
+    <div
+      class="px-3 py-2 flex items-center border-b border-[var(--p-divider-color)]"
+    >
+      <Button
+        v-tooltip.bottom="$t('g.back')"
+        icon="pi pi-arrow-left"
+        text
+        severity="secondary"
+        @click="$emit('close')"
+      />
+      <span class="ml-2 font-semibold">{{ node.display_name }}</span>
+    </div>
+    <div class="p-4 flex-grow node-help-content max-w-[600px] mx-auto">
+      <ProgressSpinner
+        v-if="isLoading"
+        class="m-auto"
+        aria-label="Loading help"
+      />
+      <!-- Markdown fetched successfully -->
+      <div
+        v-else-if="!error"
+        class="markdown-content"
+        v-html="renderedHelpHtml"
+      />
+      <!-- Fallback: markdown not found or fetch error -->
+      <div v-else class="text-sm space-y-6 fallback-content">
+        <p v-if="node.description">
+          <strong>{{ $t('g.description') }}:</strong> {{ node.description }}
+        </p>
+
+        <div v-if="inputList.length">
+          <p>
+            <strong>{{ $t('nodeHelpPage.inputs') }}:</strong>
+          </p>
+          <!-- Using plain HTML table instead of DataTable for consistent styling with markdown content -->
+          <table>
+            <thead>
+              <tr>
+                <th>{{ $t('g.name') }}</th>
+                <th>{{ $t('nodeHelpPage.type') }}</th>
+                <th>{{ $t('g.description') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="input in inputList" :key="input.name">
+                <td>
+                  <code>{{ input.name }}</code>
+                </td>
+                <td>{{ input.type }}</td>
+                <td>{{ input.tooltip || '-' }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div v-if="outputList.length">
+          <p>
+            <strong>{{ $t('nodeHelpPage.outputs') }}:</strong>
+          </p>
+          <table>
+            <thead>
+              <tr>
+                <th>{{ $t('g.name') }}</th>
+                <th>{{ $t('nodeHelpPage.type') }}</th>
+                <th>{{ $t('g.description') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="output in outputList" :key="output.name">
+                <td>
+                  <code>{{ output.name }}</code>
+                </td>
+                <td>{{ output.type }}</td>
+                <td>{{ output.tooltip || '-' }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import Button from 'primevue/button'
+import ProgressSpinner from 'primevue/progressspinner'
+import { computed } from 'vue'
+
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
+
+const { node } = defineProps<{ node: ComfyNodeDefImpl }>()
+
+const nodeHelpStore = useNodeHelpStore()
+const { renderedHelpHtml, isLoading, error } = storeToRefs(nodeHelpStore)
+
+defineEmits<{
+  (e: 'close'): void
+}>()
+
+const inputList = computed(() =>
+  Object.values(node.inputs).map((spec) => ({
+    name: spec.name,
+    type: spec.type,
+    tooltip: spec.tooltip || ''
+  }))
+)
+
+const outputList = computed(() =>
+  node.outputs.map((spec) => ({
+    name: spec.name,
+    type: spec.type,
+    tooltip: spec.tooltip || ''
+  }))
+)
+</script>
+
+<style scoped lang="postcss">
+.node-help-content :deep(:is(img, video)) {
+  @apply max-w-full h-auto block mb-4;
+}
+
+.markdown-content,
+.fallback-content {
+  @apply text-sm;
+}
+
+.markdown-content :deep(h1),
+.fallback-content h1 {
+  @apply text-[22px] font-bold mt-8 mb-4 first:mt-0;
+}
+
+.markdown-content :deep(h2),
+.fallback-content h2 {
+  @apply text-[18px] font-bold mt-8 mb-4 first:mt-0;
+}
+
+.markdown-content :deep(h3),
+.fallback-content h3 {
+  @apply text-[16px] font-bold mt-8 mb-4 first:mt-0;
+}
+
+.markdown-content :deep(h4),
+.markdown-content :deep(h5),
+.markdown-content :deep(h6),
+.fallback-content h4,
+.fallback-content h5,
+.fallback-content h6 {
+  @apply mt-8 mb-4 first:mt-0;
+}
+
+.markdown-content :deep(td),
+.fallback-content td {
+  color: var(--drag-text);
+}
+
+.markdown-content :deep(a),
+.fallback-content a {
+  color: var(--drag-text);
+  text-decoration: underline;
+}
+
+.markdown-content :deep(th),
+.fallback-content th {
+  color: var(--fg-color);
+}
+
+.markdown-content :deep(ul),
+.markdown-content :deep(ol),
+.fallback-content ul,
+.fallback-content ol {
+  @apply pl-8 my-2;
+}
+
+.markdown-content :deep(ul ul),
+.markdown-content :deep(ol ol),
+.markdown-content :deep(ul ol),
+.markdown-content :deep(ol ul),
+.fallback-content ul ul,
+.fallback-content ol ol,
+.fallback-content ul ol,
+.fallback-content ol ul {
+  @apply pl-6 my-2;
+}
+
+.markdown-content :deep(li),
+.fallback-content li {
+  @apply my-1;
+}
+
+.markdown-content :deep(*:first-child),
+.fallback-content > *:first-child {
+  @apply mt-0;
+}
+
+.markdown-content :deep(code),
+.fallback-content code {
+  @apply text-[var(--error-text)] bg-[var(--content-bg)] rounded px-1 py-0.5;
+}
+
+.markdown-content :deep(table),
+.fallback-content table {
+  @apply w-full border-collapse;
+}
+
+.markdown-content :deep(th),
+.markdown-content :deep(td),
+.fallback-content th,
+.fallback-content td {
+  @apply px-2 py-2;
+}
+
+.markdown-content :deep(tr),
+.fallback-content tr {
+  border-bottom: 1px solid var(--content-bg);
+}
+
+.markdown-content :deep(tr:last-child),
+.fallback-content tr:last-child {
+  border-bottom: none;
+}
+
+.markdown-content :deep(thead),
+.fallback-content thead {
+  border-bottom: 1px solid var(--p-text-color);
+}
+</style>

src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue

@@ -22,6 +22,15 @@
           severity="secondary"
           @click.stop="toggleBookmark"
         />
+        <Button
+          v-tooltip.bottom="$t('g.learnMore')"
+          class="help-button"
+          size="small"
+          icon="pi pi-question"
+          text
+          severity="secondary"
+          @click.stop="props.openNodeHelp(nodeDef)"
+        />
       </template>
     </TreeExplorerTreeNode>
 
@@ -54,6 +63,7 @@ import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
 const props = defineProps<{
   node: RenderedTreeExplorerNode<ComfyNodeDefImpl>
+  openNodeHelp: (nodeDef: ComfyNodeDefImpl) => void
 }>()
 
 // Note: node.data should be present for leaf nodes.

src/locales/en/main.json

@@ -30,6 +30,7 @@
     "icon": "Icon",
     "color": "Color",
     "error": "Error",
+    "help": "Help",
     "loading": "Loading",
     "findIssues": "Find Issues",
     "reportIssue": "Send Report",
@@ -1423,5 +1424,13 @@
     "cancelEditTooltip": "Cancel edit",
     "copiedTooltip": "Copied",
     "copyTooltip": "Copy message to clipboard"
+  },
+  "nodeHelpPage": {
+    "inputs": "Inputs",
+    "outputs": "Outputs",
+    "type": "Type",
+    "moreHelp": "For more help, visit the",
+    "documentationPage": "documentation page",
+    "loadError": "Failed to load help: {error}"
   }
 }

src/locales/es/main.json

@@ -294,6 +294,7 @@
     "findIssues": "Encontrar problemas",
     "firstTimeUIMessage": "Esta es la primera vez que usas la nueva interfaz. Elige \"Menú > Usar nuevo menú > Desactivado\" para restaurar la antigua interfaz.",
     "goToNode": "Ir al nodo",
+    "help": "Ayuda",
     "icon": "Icono",
     "imageFailedToLoad": "Falló la carga de la imagen",
     "imageUrl": "URL de la imagen",
@@ -836,6 +837,14 @@
     "video": "video",
     "video_models": "modelos_de_video"
   },
+  "nodeHelpPage": {
+    "documentationPage": "página de documentación",
+    "inputs": "Entradas",
+    "loadError": "Error al cargar la ayuda: {error}",
+    "moreHelp": "Para más ayuda, visita la",
+    "outputs": "Salidas",
+    "type": "Tipo"
+  },
   "nodeTemplates": {
     "enterName": "Introduzca el nombre",
     "saveAsTemplate": "Guardar como plantilla"

src/locales/fr/main.json

@@ -294,6 +294,7 @@
     "findIssues": "Trouver des problèmes",
     "firstTimeUIMessage": "C'est la première fois que vous utilisez la nouvelle interface utilisateur. Choisissez \"Menu > Utiliser le nouveau menu > Désactivé\" pour restaurer l'ancienne interface utilisateur.",
     "goToNode": "Aller au nœud",
+    "help": "Aide",
     "icon": "Icône",
     "imageFailedToLoad": "Échec du chargement de l'image",
     "imageUrl": "URL de l'image",
@@ -836,6 +837,14 @@
     "video": "vidéo",
     "video_models": "modèles_vidéo"
   },
+  "nodeHelpPage": {
+    "documentationPage": "page de documentation",
+    "inputs": "Entrées",
+    "loadError": "Échec du chargement de l’aide : {error}",
+    "moreHelp": "Pour plus d'aide, visitez la",
+    "outputs": "Sorties",
+    "type": "Type"
+  },
   "nodeTemplates": {
     "enterName": "Entrez le nom",
     "saveAsTemplate": "Enregistrer comme modèle"

src/locales/ja/main.json

@@ -294,6 +294,7 @@
     "findIssues": "問題を見つける",
     "firstTimeUIMessage": "新しいUIを初めて使用しています。「メニュー > 新しいメニューを使用 > 無効」を選択することで古いUIに戻すことが可能です。",
     "goToNode": "ノードに移動",
+    "help": "ヘルプ",
     "icon": "アイコン",
     "imageFailedToLoad": "画像の読み込みに失敗しました",
     "imageUrl": "画像URL",
@@ -836,6 +837,14 @@
     "video": "ビデオ",
     "video_models": "ビデオモデル"
   },
+  "nodeHelpPage": {
+    "documentationPage": "ドキュメントページ",
+    "inputs": "入力",
+    "loadError": "ヘルプの読み込みに失敗しました: {error}",
+    "moreHelp": "さらに詳しい情報は、",
+    "outputs": "出力",
+    "type": "タイプ"
+  },
   "nodeTemplates": {
     "enterName": "名前を入力",
     "saveAsTemplate": "テンプレートとして保存"

src/locales/ko/main.json

@@ -294,6 +294,7 @@
     "findIssues": "문제 찾기",
     "firstTimeUIMessage": "새 UI를 처음 사용합니다. \"메뉴 > 새 메뉴 사용 > 비활성화\"를 선택하여 이전 UI로 복원하세요.",
     "goToNode": "노드로 이동",
+    "help": "도움말",
     "icon": "아이콘",
     "imageFailedToLoad": "이미지를 로드하지 못했습니다.",
     "imageUrl": "이미지 URL",
@@ -836,6 +837,14 @@
     "video": "비디오",
     "video_models": "비디오 모델"
   },
+  "nodeHelpPage": {
+    "documentationPage": "문서 페이지",
+    "inputs": "입력",
+    "loadError": "도움말을 불러오지 못했습니다: {error}",
+    "moreHelp": "더 많은 도움말은",
+    "outputs": "출력",
+    "type": "유형"
+  },
   "nodeTemplates": {
     "enterName": "이름 입력",
     "saveAsTemplate": "템플릿으로 저장"

src/locales/ru/main.json

@@ -294,6 +294,7 @@
     "findIssues": "Найти проблемы",
     "firstTimeUIMessage": "Вы впервые используете новый интерфейс. Выберите \"Меню > Использовать новое меню > Отключено\", чтобы восстановить старый интерфейс.",
     "goToNode": "Перейти к ноде",
+    "help": "Помощь",
     "icon": "Иконка",
     "imageFailedToLoad": "Не удалось загрузить изображение",
     "imageUrl": "URL изображения",
@@ -836,6 +837,14 @@
     "video": "видео",
     "video_models": "видеомодели"
   },
+  "nodeHelpPage": {
+    "documentationPage": "страницу документации",
+    "inputs": "Входы",
+    "loadError": "Не удалось загрузить справку: {error}",
+    "moreHelp": "Для получения дополнительной помощи посетите",
+    "outputs": "Выходы",
+    "type": "Тип"
+  },
   "nodeTemplates": {
     "enterName": "Введите название",
     "saveAsTemplate": "Сохранить как шаблон"

src/locales/zh/main.json

@@ -294,6 +294,7 @@
     "findIssues": "查找问题",
     "firstTimeUIMessage": "这是您第一次使用新界面。选择 \"菜单 > 使用新菜单 > 禁用\" 来恢复旧界面。",
     "goToNode": "转到节点",
+    "help": "帮助",
     "icon": "图标",
     "imageFailedToLoad": "图像加载失败",
     "imageUrl": "图片网址",
@@ -836,6 +837,14 @@
     "video": "视频",
     "video_models": "视频模型"
   },
+  "nodeHelpPage": {
+    "documentationPage": "文档页面",
+    "inputs": "输入",
+    "loadError": "加载帮助失败：{error}",
+    "moreHelp": "如需更多帮助，请访问",
+    "outputs": "输出",
+    "type": "类型"
+  },
   "nodeTemplates": {
     "enterName": "输入名称",
     "saveAsTemplate": "另存为模板"

src/schemas/nodeDef/nodeDefSchemaV2.ts

@@ -73,6 +73,7 @@ export const zComfyNodeDef = z.object({
   name: z.string(),
   display_name: z.string(),
   description: z.string(),
+  help: z.string().optional(),
   category: z.string(),
   output_node: z.boolean(),
   python_module: z.string(),

src/schemas/nodeDefSchema.ts

@@ -219,6 +219,7 @@ export const zComfyNodeDef = z.object({
   name: z.string(),
   display_name: z.string(),
   description: z.string(),
+  help: z.string().optional(),
   category: z.string(),
   output_node: z.boolean(),
   python_module: z.string(),
@@ -227,7 +228,7 @@ export const zComfyNodeDef = z.object({
   /**
    * Whether the node is an API node. Running API nodes requires login to
    * Comfy Org account.
-   * https://www.comfy.org/faq
+   * https://docs.comfy.org/tutorials/api-nodes/overview
    */
   api_node: z.boolean().optional()
 })

src/services/nodeHelpService.ts

@@ -0,0 +1,59 @@
+import { api } from '@/scripts/api'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { NodeSourceType, getNodeSource } from '@/types/nodeSource'
+import { extractCustomNodeName } from '@/utils/nodeHelpUtil'
+
+export class NodeHelpService {
+  async fetchNodeHelp(node: ComfyNodeDefImpl, locale: string): Promise<string> {
+    const nodeSource = getNodeSource(node.python_module)
+
+    if (nodeSource.type === NodeSourceType.CustomNodes) {
+      return this.fetchCustomNodeHelp(node, locale)
+    } else {
+      return this.fetchCoreNodeHelp(node, locale)
+    }
+  }
+
+  private async fetchCustomNodeHelp(
+    node: ComfyNodeDefImpl,
+    locale: string
+  ): Promise<string> {
+    const customNodeName = extractCustomNodeName(node.python_module)
+    if (!customNodeName) {
+      throw new Error('Invalid custom node module')
+    }
+
+    // Try locale-specific path first
+    const localePath = `/extensions/${customNodeName}/docs/${node.name}/${locale}.md`
+    let res = await fetch(api.fileURL(localePath))
+
+    if (!res.ok) {
+      // Fall back to non-locale path
+      const fallbackPath = `/extensions/${customNodeName}/docs/${node.name}.md`
+      res = await fetch(api.fileURL(fallbackPath))
+    }
+
+    if (!res.ok) {
+      throw new Error(res.statusText)
+    }
+
+    return res.text()
+  }
+
+  private async fetchCoreNodeHelp(
+    node: ComfyNodeDefImpl,
+    locale: string
+  ): Promise<string> {
+    const mdUrl = `/docs/${node.name}/${locale}.md`
+    const res = await fetch(api.fileURL(mdUrl))
+
+    if (!res.ok) {
+      throw new Error(res.statusText)
+    }
+
+    return res.text()
+  }
+}
+
+// Export singleton instance
+export const nodeHelpService = new NodeHelpService()

src/stores/nodeDefStore.ts

@@ -38,6 +38,7 @@ export class ComfyNodeDefImpl
   category: string
   readonly python_module: string
   readonly description: string
+  readonly help: string
   readonly deprecated: boolean
   readonly experimental: boolean
   readonly output_node: boolean
@@ -118,6 +119,7 @@ export class ComfyNodeDefImpl
     this.category = obj.category
     this.python_module = obj.python_module
     this.description = obj.description
+    this.help = obj.help ?? ''
     this.deprecated = obj.deprecated ?? obj.category === ''
     this.experimental =
       obj.experimental ?? obj.category.startsWith('_for_testing')

src/stores/workspace/nodeHelpStore.ts

@@ -0,0 +1,69 @@
+import { defineStore } from 'pinia'
+import { computed, ref, watch } from 'vue'
+
+import { i18n } from '@/i18n'
+import { nodeHelpService } from '@/services/nodeHelpService'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
+import { getNodeHelpBaseUrl } from '@/utils/nodeHelpUtil'
+
+export const useNodeHelpStore = defineStore('nodeHelp', () => {
+  const currentHelpNode = ref<ComfyNodeDefImpl | null>(null)
+  const isHelpOpen = computed(() => currentHelpNode.value !== null)
+  const helpContent = ref<string>('')
+  const isLoading = ref<boolean>(false)
+  const errorMsg = ref<string | null>(null)
+
+  function openHelp(nodeDef: ComfyNodeDefImpl) {
+    currentHelpNode.value = nodeDef
+  }
+
+  function closeHelp() {
+    currentHelpNode.value = null
+  }
+
+  // Base URL for relative assets in node docs markdown
+  const baseUrl = computed(() => {
+    const node = currentHelpNode.value
+    if (!node) return ''
+    return getNodeHelpBaseUrl(node)
+  })
+
+  // Watch for help node changes and fetch its docs markdown
+  watch(
+    () => currentHelpNode.value,
+    async (node) => {
+      helpContent.value = ''
+      errorMsg.value = null
+
+      if (node) {
+        isLoading.value = true
+        try {
+          const locale = i18n.global.locale.value || 'en'
+          helpContent.value = await nodeHelpService.fetchNodeHelp(node, locale)
+        } catch (e: any) {
+          errorMsg.value = e.message
+          helpContent.value = node.description || ''
+        } finally {
+          isLoading.value = false
+        }
+      }
+    },
+    { immediate: true }
+  )
+
+  const renderedHelpHtml = computed(() => {
+    return renderMarkdownToHtml(helpContent.value, baseUrl.value)
+  })
+
+  return {
+    currentHelpNode,
+    isHelpOpen,
+    openHelp,
+    closeHelp,
+    baseUrl,
+    renderedHelpHtml,
+    isLoading,
+    error: errorMsg
+  }
+})

src/utils/markdownRendererUtil.ts

@@ -0,0 +1,53 @@
+import DOMPurify from 'dompurify'
+import { Renderer, marked } from 'marked'
+
+const ALLOWED_TAGS = ['video', 'source']
+const ALLOWED_ATTRS = [
+  'controls',
+  'autoplay',
+  'loop',
+  'muted',
+  'preload',
+  'poster'
+]
+
+// Matches relative src attributes in img, source, and video HTML tags
+// Captures: 1) opening tag with src=", 2) relative path, 3) closing quote
+// Excludes absolute paths (starting with /) and URLs (http:// or https://)
+const MEDIA_SRC_REGEX =
+  /(<(?:img|source|video)[^>]*\ssrc=['"])(?!(?:\/|https?:\/\/))([^'"\s>]+)(['"])/gi
+
+// Create a marked Renderer that prefixes relative URLs with base
+export function createMarkdownRenderer(baseUrl?: string): Renderer {
+  const normalizedBase = baseUrl ? baseUrl.replace(/\/+$/, '') : ''
+  const renderer = new Renderer()
+  renderer.image = ({ href, title, text }) => {
+    let src = href
+    if (normalizedBase && !/^(?:\/|https?:\/\/)/.test(href)) {
+      src = `${normalizedBase}/${href}`
+    }
+    const titleAttr = title ? ` title="${title}"` : ''
+    return `<img src="${src}" alt="${text}"${titleAttr} />`
+  }
+  return renderer
+}
+
+export function renderMarkdownToHtml(
+  markdown: string,
+  baseUrl?: string
+): string {
+  if (!markdown) return ''
+
+  let html = marked.parse(markdown, {
+    renderer: createMarkdownRenderer(baseUrl)
+  }) as string
+
+  if (baseUrl) {
+    html = html.replace(MEDIA_SRC_REGEX, `$1${baseUrl}$2$3`)
+  }
+
+  return DOMPurify.sanitize(html, {
+    ADD_TAGS: ALLOWED_TAGS,
+    ADD_ATTR: ALLOWED_ATTRS
+  })
+}

src/utils/nodeHelpUtil.ts

@@ -0,0 +1,23 @@
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { NodeSourceType, getNodeSource } from '@/types/nodeSource'
+
+export function extractCustomNodeName(
+  pythonModule: string | undefined
+): string | null {
+  const modules = pythonModule?.split('.') || []
+  if (modules.length >= 2 && modules[0] === 'custom_nodes') {
+    return modules[1].split('@')[0]
+  }
+  return null
+}
+
+export function getNodeHelpBaseUrl(node: ComfyNodeDefImpl): string {
+  const nodeSource = getNodeSource(node.python_module)
+  if (nodeSource.type === NodeSourceType.CustomNodes) {
+    const customNodeName = extractCustomNodeName(node.python_module)
+    if (customNodeName) {
+      return `/extensions/${customNodeName}/docs/`
+    }
+  }
+  return `/docs/${node.name}/`
+}