#+TITLE: SKILL: Multi-Modal Diagrammer (Universal Literate Note)
#+ID: skill-diagrammer
#+STARTUP: content
#+FILETAGS: :visual:diagram:mermaid:psf:

* Overview
The *Multi-Modal Diagrammer* enables the agent to communicate complex architectural plans visually using Mermaid.js and D2 synthesis.

* Phase A: Demand (PRD)
:PROPERTIES:
:STATUS: FROZEN
:END:

** 1. Purpose
Enable visual communication of plans and system states.

** 2. User Needs
- *Mermaid Synthesis:* Generate valid Mermaid.js graph code.
- *D2 Support:* Support D2 for complex layout requirements.
- *Org-Integration:* Embed results in `#+begin_src mermaid` blocks.

* Phase D: Build (Implementation)

** Synthesis Logic
#+begin_src lisp :tangle projects/org-skill-diagrammer/src/diagram-logic.lisp
(defun synthesize-mermaid (nodes edges)
  "Creates a Mermaid graph string from a list of nodes and edges."
  (let ((header "graph TD"))
    (format nil "~a~%~{  ~a --> ~a~%~}" header 
            (loop for e in edges append (list (car e) (cdr e))))))

(defun neuro-skill-diagrammer (context)
  "Neural stage: Converts a plan description into a visual graph structure."
  (let* ((payload (getf context :payload))
         (plan (getf payload :plan)))
    (format nil "
      Generate a Mermaid.js graph for the following plan:
      ---
      ~a
      ---
      Return only the Mermaid code block.
    " plan)))
#+end_src

* Registration
#+begin_src lisp
(defskill :skill-diagrammer
  :priority 60
  :trigger (lambda (context) (eq (getf (getf context :payload) :sensor) :visualize))
  :neuro #'neuro-skill-diagrammer
  :symbolic (lambda (action context) action))
#+end_src


* Phase B: Blueprint (PROTOCOL)
:PROPERTIES:
:STATUS: SIGNED
:END:

* Phase B: Blueprint (PROTOCOL)
:PROPERTIES:
:STATUS: DRAFT
:END:

** 1. Architectural Intent

The *Multi-Modal Diagrammer* will translate abstract plans and system states into visual representations, primarily using Mermaid.js, and potentially D2 for advanced layouts. The system aims to provide a clear, concise, and easily embeddable visual summary of complex information to improve agent understanding and communication with humans.  It separates neural summarization/extraction of the *desired* diagram content from the *construction* of a diagram based on that content.

** 2. Semantic Interfaces

*** 2.1. `synthesize-mermaid`
:PROPERTIES:
:purpose:  Converts a list of nodes and edges into a Mermaid.js graph string.
:input: `((nodes list) (edges list))`
:output: `(mermaid-code string)`
:side-effects: None
:END:

    This function takes a list of nodes and a list of edges and constructs a valid Mermaid.js graph declaration. Edges are represented as pairs, where the `car` is the source node and the `cdr` is the target node.

*** 2.2. `neuro-skill-diagrammer`
:PROPERTIES:
:purpose: Converts a plan description into a visual graph structure directive using a neural model.
:input: `(context plist)`
:output: `(neural-directive string)` ; e.g., the prompt sent to the neural model
:side-effects: None
:END:

    This function takes a context plist, extracts the plan description from the `:payload`, and generates a prompt or directive to be used by a neural model to synthesize the graph.  The prompt should focus on the *content* to be visualized, leaving Mermaid syntax details to the `synthesize-mermaid` function. The prompt should instruct the LLM to return *only* the mermaid code.

*** 2.3. `d2-layout` (Future Enhancement)
:PROPERTIES:
:purpose:  Applies D2 layout engine to a Mermaid graph string for complex layouts.
:input: `(mermaid-code string)`
:output: `(d2-mermaid-code string)`
:side-effects: Executes external D2 process
:END:

    This function (potentially implemented later) takes a Mermaid graph string and uses the D2 layout engine to improve the visual arrangement of the diagram.  This would likely involve shelling out to a D2 process.