Skip to content

[Agent Builder] Mermaid diagram case attachment#257708

Closed
patrykkopycinski wants to merge 8 commits into
elastic:mainfrom
patrykkopycinski:feature/agent-builder-mermaid-attachment
Closed

[Agent Builder] Mermaid diagram case attachment#257708
patrykkopycinski wants to merge 8 commits into
elastic:mainfrom
patrykkopycinski:feature/agent-builder-mermaid-attachment

Conversation

@patrykkopycinski
Copy link
Copy Markdown
Contributor

@patrykkopycinski patrykkopycinski commented Mar 13, 2026 •
edited
Loading

Summary

Adds the ability to attach Mermaid diagrams to Cases from Agent Builder. This enables both programmatic attachment (via agent tools) and manual UI attachment ("Add to Case" button).

What's included

Server-side (agent_builder_platform):

  • agentBuilderMermaid unified value attachment type registration with io-ts validation
  • LLM-friendly formatting for case context (renders mermaid source in prompts)
  • add_case_attachment agent tool for programmatic attachment of mermaid diagrams to cases

Client-side (agent_builder_platform):

  • MermaidCaseAttachment React component — renders mermaid diagrams as SVG using the mermaid library (v11.13.0), with a collapsible source code accordion
  • Attachment type UI registration with visVega icon and "mermaid diagram" label
  • "Add to Case" picker component in the mermaid attachment view

Cases plugin fixes (unified attachment gaps):

New files

File Purpose
common/constants/cases.ts AGENT_BUILDER_MERMAID attachment type constant
server/cases/register_cases_attachments.ts Server-side attachment type registration
server/tools/cases/add_case_attachment.ts Agent tool for adding mermaid to cases
public/cases/register_mermaid_cases_attachment.tsx Client-side attachment UI registration
public/cases/mermaid_case_attachment_component.tsx Mermaid diagram React renderer
public/attachment_types/add_to_case_picker.tsx "Add to Case" UI picker

How it works

  1. Programmatic: The agent calls the add_case_attachment tool with a case ID, mermaid content, and title
  2. Manual: User clicks the kebab menu on a mermaid attachment in the conversation → "Add to Case" → picks a case
  3. The attachment is stored as a unified value attachment (cases-attachments SO type)
  4. The Cases UI renders it via the unifiedAttachmentTypeRegistry in the Activity tab timeline

Test plan

  • Enable xpack.cases.attachments.enabled: true in kibana.dev.yml
  • Ask the AI Agent to create a mermaid diagram and add it to a case
  • Verify the diagram renders in the case Activity tab
  • Click the "Add to Case" button on a mermaid attachment in the conversation
  • Verify delete works from the kebab menu on the attachment
  • Verify the mermaid source accordion expands and shows raw code

@patrykkopycinski
[Agent Builder] Add mermaid diagram attachment type and creation skill
1d9bf50 
Adds a new `mermaid` attachment type to the Agent Builder, enabling agents
to create and render Mermaid diagrams (flowcharts, sequence diagrams, state
machines, ERDs, etc.) inline in conversations.

- Common: `AttachmentType.mermaid` enum, `MermaidAttachmentData` interface, zod schema
- Server: attachment type definition with syntax validation and LLM formatting
- Browser: lazy-loaded mermaid rendering with dark/light theme support,
  inline + canvas views, copy/expand action buttons
- Skill: `create-mermaid-graph` built-in skill with diagram type guidance,
  syntax reference, and best practices for LLM-generated diagrams
- Dependency: `mermaid@11.13.0` added to package.json
@patrykkopycinski
Copy link
Copy Markdown
Contributor Author

patrykkopycinski commented Mar 13, 2026

/ci

@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Mar 13, 2026

🤖 Jobs for this PR can be triggered through checkboxes. 🚧

ℹ️ To trigger the CI, please tick the checkbox below 👇

  • Click to trigger kibana-pull-request for this PR!
  • Click to trigger kibana-deploy-project-from-pr for this PR!
  • Click to trigger kibana-deploy-cloud-from-pr for this PR!
  • Click to trigger kibana-entity-store-performance-from-pr for this PR!
  • Click to trigger kibana-storybooks-from-pr for this PR!

@patrykkopycinski
Copy link
Copy Markdown
Contributor Author

patrykkopycinski commented Mar 13, 2026

/ci

1 similar comment
@patrykkopycinski
Copy link
Copy Markdown
Contributor Author

patrykkopycinski commented Mar 13, 2026

/ci

@patrykkopycinski
Copy link
Copy Markdown
Contributor Author

patrykkopycinski commented Mar 13, 2026

/ci

@patrykkopycinski
[Agent Builder] Add mermaid diagram case attachment + fix unified att…
d669ad5 
…achment gaps

- Register `agentBuilderMermaid` as a unified value attachment type
- Add server-side validation and LLM formatting for mermaid attachments
- Add MermaidCaseAttachment React component with live diagram rendering
- Add "Add to Case" UI picker for mermaid attachments
- Add `add_case_attachment` agent tool for programmatic attachment
- Fix 15 Cases plugin gaps preventing unified attachments from working
  end-to-end when `xpack.cases.attachments.enabled` is true
@patrykkopycinski patrykkopycinski changed the title [Agent Builder] Add mermaid diagram attachment type and creation skill [Agent Builder] Mermaid diagram case attachment Mar 13, 2026
@patrykkopycinski
Copy link
Copy Markdown
Contributor Author

patrykkopycinski commented Mar 13, 2026

/ci

@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Mar 13, 2026 •
edited
Loading

⏳ Build in-progress, with failures

Failed CI Steps

Test Failures

  • [job] [logs] FTR Configs #95 / Cloud Security Posture - Group 2 Test adding Cloud Security Posture Integrations CNVM CNVM AWS On Add Agent modal there should be modal that has Cloud Formation details as well as button that redirects user to Cloud formation page on AWS upon clicking them

History

This was referenced Apr 20, 2026
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@patrykkopycinski @elasticmachine @kibanamachine