visualize-flow
Visualize Flow
Generate a Mermaid flowchart diagram from a WaniWani SDK flow file.
Arguments
The user may provide a file path as an argument. If not provided, search for flow files using **/flows/**/*.ts patterns and ask the user which one to visualize.
Steps
1. Find and read the flow file
Read the entire flow source file. The flow is defined using the createFlow builder pattern with chained .addNode(), .addEdge(), .addConditionalEdge(), and .compile() calls.
2. Extract the graph structure
Parse the source code to identify:
Nodes — Each .addNode("name", ...) call. Classify by what the handler returns:
More from waniwani-ai/sdk
waniwani-sdk
Integrate the @waniwani/sdk package into MCP servers for event tracking, multi-step conversational flows, widget creation, knowledge base search, and chat components. Use when building or integrating WaniWani analytics, creating MCP tools with UI widgets, building multi-turn flows, or adding chat to a website.
9oai-submission
Generate OpenAI/ChatGPT App submission documents (Tool Justification + Test Cases) in Notion by analyzing the MCP server's tools, flows, and widgets
2copy
Copy text to the user's clipboard. Use when the user wants to copy generated content, summaries, or any text to their clipboard.
1translations
Add or update translations for pages and components in the WaniWani app. Use when the user wants to add translations, create translation files, internationalize a page, make text translatable, or update existing translations. Also use proactively when creating new pages or components with user-facing text.
1knowledge-base
Set up a knowledge base with search for an MCP project. Creates FAQ tool and ingestion script using the WaniWani KB API via @waniwani/sdk.
1frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
1