Diagrams and workflows as a Code with Agents

Tl;DR

I Got the social signin working here, with the slidev-editor.

+++ Tech Talk about the MermaidxOpenAI PoC

Now its time to bring the AI part to the equation.

If you are an architect, you will like this.

Intro

Same as we can do presentations as a code, we can know diagrams as a code.

In fact, the diagrams as a code (Mermaid) can be integrated with our SliDev-Editor Setup.

NEW | MermaidJS-Editor Repo

Source Code to MermaidJS + LLMs. Via NextJS and ToastUI md editor

I want to create a NextJS web app that will allow for the user to provide an API key via env variable, and it will have a qna chat interface similar to this wireframe.

The focus of the web app will be to create mermaidJS diagram code, based on the user input, that will be editable into a toastUI md editor and changes will be re rendered live
can we make the model be a parameter passed via env

and also make the UI look more modern

#clarify with a prd.md
##create a implementation plan.md with well define phases that can be tested and build one on top of the next phase

Dont forget about the tab icon and the opengraph as a requirement when vibe coding webapps!

If you are curious, this was the wireframe:

A PRD and implementation plan is always a good idea to vibe code:

#git init && git add . && git commit -m "Initial commit: Starting simple mermaidjs x openai nextjs"

After vibe coding 30 min, this is the result: https://mermaid.js.org/config/configuration.html

Thanks to Claude Haiku 4.5, I have seen a better way for the docker-compose and their environments:

With a full example here and here

version: '3.8'

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: mermaidjs-openai-editor
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - OPENAI_API_KEY=${OPENAI_API_KEY}
      - LLM_MODEL=${LLM_MODEL:-gpt-4o-mini}
      - SYSTEM_PROMPT_PATH=${SYSTEM_PROMPT_PATH:-./prompts/system.md}
      - USER_PROMPT_PATH=${USER_PROMPT_PATH:-./prompts/user.md}
      - CONVERSATION_HISTORY_LIMIT=${CONVERSATION_HISTORY_LIMIT:-10}

It will read from the .env variables and if not provided, the default values will kick in:

make help
#docker builder prune -a -f#
make docker-up
#du -sh ~/Desktop/mermaidjsxopenai-editor #~180mb
#docker images | grep mermaidjs #~1.5gb

Live info for your PPTs

For live info, you can always try scrapping or this programmatic search engine search.

But if you have tried already, you will know that there might be some complications depending on how the websites are created.

But I got recently 1y trial of Perplexity and its quite cool

And if you are windows/mac user, you can try their Commet browser, with cool web summarization

Anyways, we saw how to bring API data directly to our slides via SliDevJS as seen here.

PPTs as a Code with SliDev

SliDev + yFinance API connected

SliDev Editor Repository

Source Code for SliDev Editor and Tech Talks ppts

Grok API

Few weeks ago I was tinkering with grok API, which can be used also via LiteLLM.

• https://x.ai/api
  • https://console.x.ai/
  • https://docs.x.ai/docs/overview
  • https://docs.x.ai/docs/models
  • https://github.com/JAlcocerT/Streamlit-MultiChat/tree/main/Z_Tests/GrokAPI 🐍

And just this week I got…

Perplexity API

… Perplexity PRO access.

It feels great to get life/search data from the internet.

• https://sourcegraph.com/search

• https://www.perplexity.ai/discover

• https://github.com/JAlcocerT/Streamlit-MultiChat/tree/main/Z_Tests/PerplexityAPI

• https://jalcocert.github.io/JAlcocerT/live-search-and-research-with-ai/#perplexity 🐍

curl https://api.perplexity.ai/chat/completions \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "sonar-pro",
    "messages": [
      {
        "role": "user", 
        "content": "What are the major AI developments and announcements from today across the tech industry?"
      }
    ]
  }' | jq

Conclusions

Does it even make sense to try building an AI Saas?

I would say yes, for the learnings.

For the financial motivations, just be aware of Pareto and that most tries will fail.

The OpenAI LLM approach was good enough for this PoC and I did not end up plugging Codex CLI.

You could also try LangChain Agents approach as per this cfe video

Mermaid x Excalidraw

Dont choose between Mermaid or Excalidraw.

Diagrams and PPTs

Diagrams and PPTs Tools | Docs ↗

flowchart TD
    A[Christmas] -->|Get money|
    B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

• https://github.com/excalidraw/excalidraw-libraries
• https://libraries.excalidraw.com/?theme=light&sort=default

Mermaid x Tech Talk

Ive prepared a tech talk about this mermaid x openAI setup:

git clone https://github.com/JAlcocerT/slidev-editor

FAQ

Architecture and Icons

If you are a D&A Architect, consider:

• Iconify
• Icon-sets
• Mermaid