mermaid-tam/test.html at main · dsrednicki/mermaid-tam · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TAM Diagram Test</title>
  <script type="importmap">
    {
      "imports": {
        "d3": "https://cdn.jsdelivr.net/npm/d3@7/+esm",
        "dagre": "https://cdn.jsdelivr.net/npm/dagre@0.8.5/+esm"
      }
    }
  </script>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      background: #f5f5f5;
    }
    h1 {
      color: #333;
    }
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    .editor {
      background: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .output {
      background: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      min-height: 400px;
    }
    textarea {
      width: 100%;
      height: 400px;
      font-family: 'Monaco', 'Menlo', monospace;
      font-size: 14px;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      resize: vertical;
    }
    button {
      margin-top: 10px;
      padding: 10px 20px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }
    button:hover {
      background: #0056b3;
    }
    .error {
      color: #dc3545;
      padding: 10px;
      background: #f8d7da;
      border-radius: 4px;
      margin-top: 10px;
    }
    .examples {
      margin-top: 20px;
    }
    .examples button {
      background: #6c757d;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .examples button:hover {
      background: #545b62;
    }
    #output svg {
      max-width: 100%;
    }
  </style>
</head>
<body>
  <h1>🧪 TAM Diagram Test</h1>

  <div class="container">
    <div class="editor">
      <h3>TAM Code</h3>
      <textarea id="code">tam
  title Client-Server Architecture
  direction LR

  human User
  agent WebApp
  storage Database

  User --> WebApp
  WebApp --(R)--> Database: Query
  WebApp --(M)--> Database: Update</textarea>
      <button onclick="render()">Render Diagram</button>

      <div class="examples">
        <h4>Load Example:</h4>
        <button onclick="loadExample('basic')">Basic</button>
        <button onclick="loadExample('channels')">Channels</button>
        <button onclick="loadExample('nested')">Nested</button>
        <button onclick="loadExample('ecommerce')">E-Commerce</button>
      </div>
    </div>

    <div class="output">
      <h3>Rendered Output</h3>
      <div id="output"></div>
      <div id="error"></div>
    </div>
  </div>

  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
    import tam from './dist/mermaid-tam.esm.mjs';

    // Register TAM diagram
    await mermaid.registerExternalDiagrams([tam]);

    mermaid.initialize({
      startOnLoad: false,
      theme: 'default',
      securityLevel: 'loose'
    });

    window.render = async function() {
      const code = document.getElementById('code').value;
      const output = document.getElementById('output');
      const error = document.getElementById('error');

      error.innerHTML = '';
      output.innerHTML = '';

      try {
        const { svg } = await mermaid.render('tam-diagram', code);
        output.innerHTML = svg;
      } catch (e) {
        error.innerHTML = `<div class="error">Error: ${e.message}</div>`;
        console.error(e);
      }
    };

    const examples = {
      basic: `tam
  title Basic Architecture

  agent Client
  agent Server
  storage Database

  Client --> Server
  Server --> Database`,

      channels: `tam
  title With Channels
  direction LR

  agent Browser
  agent APIGateway
  agent Service
  storage Cache

  Browser --(R)--> APIGateway: HTTP
  APIGateway --(R)--> Service: gRPC
  Service --(M)--> Cache: Read/Write`,

      nested: `tam
  title Nested Components

  human User

  agent Frontend {
    agent Router
    agent StateManager
    storage LocalCache

    Router --> StateManager
    StateManager --> LocalCache
  }

  agent Backend {
    agent APIHandler
    storage SessionStore

    APIHandler --> SessionStore
  }

  storage Database

  User --> Frontend
  Frontend --> Backend
  Backend --> Database`,

      ecommerce: `tam
  title E-Commerce Platform
  direction TB

  human Customer
  human Admin

  agent WebPortal {
    agent ProductCatalog
    agent ShoppingCart
    storage SessionData
  }

  agent OrderService {
    agent OrderProcessor
    agent PaymentGateway
    storage OrderQueue
  }

  storage ProductDB
  storage OrderDB

  Customer --> WebPortal
  Admin --> WebPortal

  WebPortal --(R)--> ProductDB: Query
  WebPortal --(R)--> OrderService: Submit Order

  OrderService --(M)--> OrderDB: Persist`
    };

    window.loadExample = function(name) {
      document.getElementById('code').value = examples[name];
      render();
    };

    // Initial render
    render();
  </script>
</body>
</html>