# PowerON Platform Architecture Diagrams

This document contains all Mermaid diagrams visualizing the PowerON platform architecture, components, and workflows. These diagrams can be rendered in any Mermaid-compatible viewer or exported as images for documentation purposes.

---

## 1. Platform Overview

This diagram shows the overall architecture of the PowerON platform, including the UI layer, API, workflow engine, microservices, and the customer tenant with pre-processing engine.

```mermaid
graph TB
    subgraph "PowerON Platform Architecture"
        UI[UI Layer<br/>Playground, Chatbots, Customer UIs]
        API[REST API<br/>Open API Design]
        WF[Workflow Engine<br/>Tasks & Actions Orchestration]
        MS[Microservices Layer<br/>AI, Processing, Integration]
        DB[(Multi-Tenant Database<br/>RBAC Access Control)]
    end
    
    subgraph "Customer Tenant"
        PRE[Pre-Processing Engine<br/>On-Premise/Edge]
        DATA[Customer Data Sources<br/>SharePoint, Outlook, etc.]
    end
    
    subgraph "Plug & Play Components"
        RENDER[Dynamic Renderers<br/>PDF, DOCX, XLSX, etc.]
        AI_SEL[Dynamic AI Selection<br/>Analysis, Generate, Web, Plan]
    end
    
    UI --> API
    API --> WF
    WF --> MS
    MS --> DB
    MS --> RENDER
    MS --> AI_SEL
    PRE -->|Secure API| API
    DATA --> PRE
    
    style UI fill:#4B73FF,color:#fff
    style API fill:#4B73FF,color:#fff
    style WF fill:#FF6B6B,color:#fff
    style MS fill:#51CF66,color:#fff
    style DB fill:#FFD93D,color:#000
    style PRE fill:#A78BFA,color:#fff
    style DATA fill:#A78BFA,color:#fff
    style RENDER fill:#51CF66,color:#fff
    style AI_SEL fill:#51CF66,color:#fff
```

---

## 2. Customer Story

This diagram illustrates the customer journey from application-centric to data-centric work, showing the four key steps: identification, MVP integration, pre-processing deployment, and transformation.

```mermaid
graph LR
    subgraph "Step 1: Identification"
        ID[Identify Customer Journey<br/>Business Process Analysis]
    end
    
    subgraph "Step 2: MVP Integration"
        MVP[MVP Integration<br/>Data Privacy & Compliance Focus]
        NEUT[Privacy Neutralizer<br/>DSGVO/GDPR Compliant]
        SEC[Secure Connections<br/>Encrypted Data Sources]
    end
    
    subgraph "Step 3: Pre-Processing"
        PRE[Pre-Processing Engine<br/>Standard API Deployment]
        EDGE[On-Premise/Edge<br/>Local Processing]
    end
    
    subgraph "Step 4: Transformation"
        OLD[Application-Centric<br/>❌ Work within Apps<br/>❌ Manual Transfer<br/>❌ Data Silos]
        NEW[Data-Centric<br/>✅ Work with Data<br/>✅ Auto Integration<br/>✅ Unified View]
    end
    
    ID --> MVP
    MVP --> NEUT
    MVP --> SEC
    MVP --> PRE
    PRE --> EDGE
    EDGE --> OLD
    OLD -->|Transformation| NEW
    
    style ID fill:#4B73FF,color:#fff
    style MVP fill:#51CF66,color:#fff
    style NEUT fill:#FF6B6B,color:#fff
    style SEC fill:#FF6B6B,color:#fff
    style PRE fill:#A78BFA,color:#fff
    style EDGE fill:#A78BFA,color:#fff
    style OLD fill:#FFD93D,color:#000
    style NEW fill:#51CF66,color:#fff
```

---

## 3. Workflow System

This diagram shows the workflow structure (Workflow → Tasks → Actions), execution modes (Learning, Actionplan, Automation), and available methods.

```mermaid
graph TB
    subgraph "Workflow Structure"
        WF[Workflow<br/>Customer Journey]
        T1[Task 1]
        T2[Task 2]
        T3[Task 3]
        
        A1[Action 1.1]
        A2[Action 1.2]
        A3[Action 2.1]
        A4[Action 3.1]
        
        WF --> T1
        WF --> T2
        WF --> T3
        
        T1 --> A1
        T1 --> A2
        T2 --> A3
        T3 --> A4
    end
    
    subgraph "Execution Modes"
        LM[Learning Mode<br/>Plan-Act-Observe-Refine<br/>Up to 5 steps]
        AM[Actionplan Mode<br/>Batch Planning<br/>Sequential Execution]
        AUTO[Automation Mode<br/>Scheduled/Event-Triggered<br/>Production Workflows]
    end
    
    subgraph "Available Methods"
        AI_M[ai.*<br/>process, analyze, generate]
        SP_M[sharepoint.*<br/>search, read, upload]
        OUT_M[outlook.*<br/>read, send emails]
        CTX_M[context.*<br/>get, set context]
    end
    
    A1 --> AI_M
    A2 --> SP_M
    A3 --> OUT_M
    A4 --> CTX_M
    
    WF -.->|Mode Selection| LM
    WF -.->|Mode Selection| AM
    WF -.->|Mode Selection| AUTO
    
    style WF fill:#4B73FF,color:#fff
    style T1 fill:#51CF66,color:#fff
    style T2 fill:#51CF66,color:#fff
    style T3 fill:#51CF66,color:#fff
    style A1 fill:#FFD93D,color:#000
    style A2 fill:#FFD93D,color:#000
    style A3 fill:#FFD93D,color:#000
    style A4 fill:#FFD93D,color:#000
    style LM fill:#A78BFA,color:#fff
    style AM fill:#A78BFA,color:#fff
    style AUTO fill:#A78BFA,color:#fff
```

---

## 4. Microservices Architecture

This diagram shows the complete microservices structure, organized into Core Services, AI & Processing, Integration Services, and Security, with their relationships and dependencies.

```mermaid
graph TB
    subgraph "Core Services"
        CHAT[self.services.chat<br/>Chat & Conversation]
        WF_SVC[self.services.workflow<br/>Runtime Workflow State<br/>not a registered service]
        UTILS[self.services.utils<br/>Utilities]
    end
    
    subgraph "AI & Processing"
        AI[self.services.ai<br/>AI Model Management]
        GEN[self.services.generation<br/>Document Generation<br/>PDF, DOCX, XLSX, etc.]
        EXT[self.services.extraction<br/>Document Extraction<br/>Multiple Extractors]
        NEUT_SVC[self.services.neutralization<br/>Privacy Neutralization<br/>PII Detection]
    end
    
    subgraph "Integration Services"
        SP[self.services.sharepoint<br/>SharePoint Integration]
        WEB[self.services.web<br/>Web Operations]
        TICKET[self.services.ticket<br/>Jira, ClickUp, etc.]
    end
    
    subgraph "Additional Services not shown"
        AGENT[self.services.agent]
        KNOWLEDGE[self.services.knowledge]
        MESSAGING[self.services.messaging]
        BILLING[self.services.billing]
        SUBSCRIPTION[self.services.subscription]
    end
    
    subgraph "Security"
        SEC_SVC[self.services.security<br/>Auth, Authorization<br/>Token Management]
    end
    
    CHAT --> AI
    CHAT --> GEN
    CHAT --> EXT
    WF_SVC --> AI
    GEN --> EXT
    EXT --> NEUT_SVC
    SP --> SEC_SVC
    WEB --> SEC_SVC
    TICKET --> SEC_SVC
    
    style CHAT fill:#4B73FF,color:#fff
    style WF_SVC fill:#4B73FF,color:#fff
    style UTILS fill:#4B73FF,color:#fff
    style AI fill:#51CF66,color:#fff
    style GEN fill:#51CF66,color:#fff
    style EXT fill:#51CF66,color:#fff
    style NEUT_SVC fill:#FF6B6B,color:#fff
    style SP fill:#A78BFA,color:#fff
    style WEB fill:#A78BFA,color:#fff
    style TICKET fill:#A78BFA,color:#fff
    style SEC_SVC fill:#FFD93D,color:#000
```

---

## 5. RBAC System

This diagram visualizes the Role-Based Access Control system, showing context types (DATA, UI, RESOURCE), access levels (none, my, group, all), view logic, and rule hierarchy.

```mermaid
graph TB
    subgraph "RBAC Contexts"
        DATA[DATA Context<br/>Tables & Fields]
        UI_CTX[UI Context<br/>Components & Features]
        RES[RESOURCE Context<br/>AI Models, Actions]
    end
    
    subgraph "Access Levels - Opening Logic"
        N[none - n<br/>No Access]
        M[my - m<br/>My Records]
        G[group - g<br/>Group Records]
        A[all - a<br/>All Records]
    end
    
    subgraph "View Logic"
        V_TRUE[view: true<br/>Visible/Enabled]
        V_FALSE[view: false<br/>Hidden/Disabled]
    end
    
    subgraph "Rule Hierarchy"
        GEN_RULE[Generic Rules<br/>item = null]
        SPEC_RULE[Specific Rules<br/>item = 'table.field']
    end
    
    DATA --> N
    DATA --> M
    DATA --> G
    DATA --> A
    
    DATA --> V_TRUE
    UI_CTX --> V_TRUE
    RES --> V_TRUE
    
    DATA --> V_FALSE
    UI_CTX --> V_FALSE
    RES --> V_FALSE
    
    GEN_RULE --> SPEC_RULE
    
    style DATA fill:#4B73FF,color:#fff
    style UI_CTX fill:#51CF66,color:#fff
    style RES fill:#A78BFA,color:#fff
    style N fill:#FF6B6B,color:#fff
    style M fill:#FFD93D,color:#000
    style G fill:#51CF66,color:#fff
    style A fill:#4B73FF,color:#fff
    style V_TRUE fill:#51CF66,color:#fff
    style V_FALSE fill:#FF6B6B,color:#fff
    style GEN_RULE fill:#FFD93D,color:#000
    style SPEC_RULE fill:#4B73FF,color:#fff
```

---

## 6. UI Architecture

This diagram shows the UI layer structure, RBAC-driven configuration, REST API integration, and available UI components.

```mermaid
graph TB
    subgraph "UI Layer"
        PLAY[Playground UI<br/>React-based Main Entry]
        CHAT_UI[Chatbots<br/>Custom Chat Interfaces]
        CUST_UI[Customer UIs<br/>Tenant-Specific UIs]
    end
    
    subgraph "RBAC-Driven Configuration"
        TENANT[Per Tenant<br/>Configuration]
        USER[Per User<br/>Configuration]
        COMP[Component-Level<br/>Visibility]
        FEAT[Feature-Level<br/>Access Control]
    end
    
    subgraph "REST API"
        API[REST API<br/>Standardized Interface]
    end
    
    subgraph "UI Components"
        CHAT_COMP[Chat Interface]
        DOC_COMP[Document Viewer/Editor]
        WF_COMP[Workflow Editor]
        CONN_COMP[Connection Manager]
        SETT_COMP[Settings Panels]
        DASH_COMP[Dashboard Widgets]
    end
    
    PLAY --> API
    CHAT_UI --> API
    CUST_UI --> API
    
    TENANT --> COMP
    USER --> COMP
    COMP --> FEAT
    
    FEAT --> CHAT_COMP
    FEAT --> DOC_COMP
    FEAT --> WF_COMP
    FEAT --> CONN_COMP
    FEAT --> SETT_COMP
    FEAT --> DASH_COMP
    
    PLAY --> CHAT_COMP
    PLAY --> DOC_COMP
    PLAY --> WF_COMP
    
    style PLAY fill:#4B73FF,color:#fff
    style CHAT_UI fill:#51CF66,color:#fff
    style CUST_UI fill:#51CF66,color:#fff
    style API fill:#FF6B6B,color:#fff
    style TENANT fill:#A78BFA,color:#fff
    style USER fill:#A78BFA,color:#fff
    style COMP fill:#FFD93D,color:#000
    style FEAT fill:#FFD93D,color:#000
```

---

## 7. Big Picture & Future Vision

This diagram shows the platform evolution from today to the future, including vendor independence, graphical workflow modeling, MCP integration, and future capabilities.

```mermaid
graph TB
    subgraph "Vendor Independence"
        AI_PROV[AI Providers<br/>OpenAI, Anthropic, Google, Azure]
        CONN_PROV[Connectors<br/>Microsoft, Google, Amazon, Others]
    end
    
    subgraph "Today"
        REST[REST API Workflows]
        PLAY_TODAY[Playground UI]
        MULT_AI[Multiple AI Providers]
        STD_CONN[Standard Connectors]
    end
    
    subgraph "Near Future"
        GRAPH[Graphical Workflow Editor<br/>Drag & Drop]
        MCP[MCP Copilot Integration<br/>Microsoft Copilot]
        PRE_ENH[Enhanced Pre-Processing]
        AI_SEL_ENH[Advanced AI Selection]
    end
    
    subgraph "Future Vision"
        AI_WF[AI-Powered Workflow Generation]
        MULT_COP[Multi-Platform Copilot Support]
        EDGE_EXP[Edge Computing Expansion]
        FED_LEARN[Federated Learning]
    end
    
    REST --> GRAPH
    PLAY_TODAY --> GRAPH
    MULT_AI --> AI_PROV
    STD_CONN --> CONN_PROV
    
    GRAPH --> AI_WF
    MCP --> MULT_COP
    PRE_ENH --> EDGE_EXP
    AI_SEL_ENH --> FED_LEARN
    
    style AI_PROV fill:#4B73FF,color:#fff
    style CONN_PROV fill:#51CF66,color:#fff
    style REST fill:#FFD93D,color:#000
    style PLAY_TODAY fill:#FFD93D,color:#000
    style GRAPH fill:#A78BFA,color:#fff
    style MCP fill:#A78BFA,color:#fff
    style AI_WF fill:#51CF66,color:#fff
    style MULT_COP fill:#51CF66,color:#fff
    style EDGE_EXP fill:#4B73FF,color:#fff
    style FED_LEARN fill:#4B73FF,color:#fff
```

---

## 8. Integration Guide

This diagram shows the REST API endpoints, building blocks for developers, integration points in the codebase, and the development workflow.

```mermaid
graph TB
    subgraph "REST API Endpoints"
        WF_API[Workflow API<br/>Create, Execute, Manage]
        DOC_API[Document API<br/>Upload, Download, Process]
        CONN_API[Connection API<br/>SharePoint, Outlook, etc.]
        RBAC_API[RBAC API<br/>Roles & Permissions]
        OPT_API[Options API<br/>Dynamic UI Options]
    end
    
    subgraph "Building Blocks"
        WF_METH[Workflow Methods<br/>Extend MethodBase]
        SERVICES[Services<br/>New Service Modules]
        CONNECTORS[Connectors<br/>External Systems]
        UI_COMP[UI Components<br/>React Components]
    end
    
    subgraph "Integration Points"
        WF_DIR[platform-core/modules/workflows/methods/]
        SVC_DIR[platform-core/modules/serviceCenter/services/]
        CONN_DIR[platform-core/modules/connectors/]
        ROUTE_DIR[platform-core/modules/routes/]
        FEAT_DIR[platform-core/modules/features/]
    end
    
    subgraph "Development Workflow"
        ARCH[Understand Architecture]
        SETUP[Set Up Environment]
        CHOOSE[Choose Integration Point]
        PATTERN[Follow Patterns]
        TEST[Test with RBAC]
        DOC[Document Changes]
    end
    
    WF_API --> WF_METH
    DOC_API --> SERVICES
    CONN_API --> CONNECTORS
    RBAC_API --> UI_COMP
    OPT_API --> UI_COMP
    
    WF_METH --> WF_DIR
    SERVICES --> SVC_DIR
    CONNECTORS --> CONN_DIR
    UI_COMP --> ROUTE_DIR
    UI_COMP --> FEAT_DIR
    
    ARCH --> SETUP
    SETUP --> CHOOSE
    CHOOSE --> PATTERN
    PATTERN --> TEST
    TEST --> DOC
    
    style WF_API fill:#4B73FF,color:#fff
    style DOC_API fill:#4B73FF,color:#fff
    style CONN_API fill:#4B73FF,color:#fff
    style RBAC_API fill:#4B73FF,color:#fff
    style OPT_API fill:#4B73FF,color:#fff
    style WF_METH fill:#51CF66,color:#fff
    style SERVICES fill:#51CF66,color:#fff
    style CONNECTORS fill:#51CF66,color:#fff
    style UI_COMP fill:#51CF66,color:#fff
    style ARCH fill:#FFD93D,color:#000
    style SETUP fill:#FFD93D,color:#000
    style CHOOSE fill:#FFD93D,color:#000
    style PATTERN fill:#FFD93D,color:#000
    style TEST fill:#FFD93D,color:#000
    style DOC fill:#FFD93D,color:#000
```

---

## Usage Notes

- These diagrams can be rendered in any Mermaid-compatible viewer (e.g., mermaid.live, GitHub, GitLab, VS Code with Mermaid extension)
- To export as images, use a Mermaid renderer or online tool like mermaid.live
- Each diagram corresponds to a tab in the main documentation (`doc_platform_big_picture.html`)
- The color scheme is consistent across all diagrams:
  - Blue (#4B73FF): Core/Platform components
  - Green (#51CF66): Processing/AI components
  - Red (#FF6B6B): Security/Critical components
  - Yellow (#FFD93D): Development/Workflow steps
  - Purple (#A78BFA): Integration/Customer components

---

*Last updated: 2026-04-05 (audit: service paths, missing services, date corrected)*