diff --git a/alternative_api_call.js b/alternative_api_call.js new file mode 100644 index 0000000..117e40b --- /dev/null +++ b/alternative_api_call.js @@ -0,0 +1,41 @@ +// Alternative API call using GET with URL encoding (like the healthcheck) +export const code = async (inputs) => { + const { diagram, format } = inputs; + + if (!diagram || !diagram.trim()) { + throw new Error("No Mermaid input provided"); + } + + // Normalize line endings + const normalizedDiagram = diagram + .replace(/\r\n/g, '\n') // Convert Windows line endings + .replace(/\r/g, '\n') // Convert old Mac line endings + .trim(); // Remove leading/trailing whitespace + + // URL encode the diagram (this preserves newlines as %0A) + const encodedDiagram = encodeURIComponent(normalizedDiagram); + + // Log for debugging + console.log("Original diagram:"); + console.log(JSON.stringify(normalizedDiagram)); + console.log("URL encoded diagram:"); + console.log(encodedDiagram); + + // Use GET with data parameter (like the healthcheck does) + const url = `https://diagrams.starbit.cloud/generate?type=${encodeURIComponent(format)}&data=${encodedDiagram}`; + + const resp = await fetch(url, { + method: "GET", + }); + + if (!resp.ok) { + const txt = await resp.text(); + throw new Error(`Mermaid-server error ${resp.status}: ${txt}`); + } + + const buffer = Buffer.from(await resp.arrayBuffer()); + const mime = format === "png" ? "image/png" : "image/svg+xml"; + const file = `data:${mime};base64,${buffer.toString("base64")}`; + + return { file }; +}; diff --git a/basic_test.mmd b/basic_test.mmd new file mode 100644 index 0000000..a155dfa --- /dev/null +++ b/basic_test.mmd @@ -0,0 +1,2 @@ +graph TD + A --> B diff --git a/debug_request.js b/debug_request.js new file mode 100644 index 0000000..e97efe1 --- /dev/null +++ b/debug_request.js @@ -0,0 +1,35 @@ +// Debug script to test what the server actually receives +const diagram = `graph TD + A[Test] --> B[Node] + A --> C[Another]`; + +console.log("Original diagram:"); +console.log(JSON.stringify(diagram)); +console.log("\nDiagram visualization:"); +console.log(diagram); + +// Test with both your current format and a simple test +const testCases = [ + { + name: "Simple test", + diagram: "graph TD\n A --> B" + }, + { + name: "Your format", + diagram: diagram + }, + { + name: "Minimal", + diagram: "graph TD\nA-->B" + } +]; + +testCases.forEach((testCase, i) => { + console.log(`\n=== Test Case ${i+1}: ${testCase.name} ===`); + console.log("JSON representation:", JSON.stringify(testCase.diagram)); + console.log("Actual content:"); + console.log(testCase.diagram); + console.log("Length:", testCase.diagram.length); + console.log("Contains newlines:", testCase.diagram.includes('\n')); + console.log("Newline positions:", [...testCase.diagram].map((char, idx) => char === '\n' ? idx : null).filter(x => x !== null)); +}); diff --git a/docker-compose.yml b/docker-compose.yml index 91ebd6f..46c7d43 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -13,7 +13,7 @@ services: ALLOW_ALL_ORIGINS: "true" restart: unless-stopped healthcheck: - test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:80/health"] + test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:80/generate?data=graph%20TD%0A%20%20%20%20A%5BTest%5D"] interval: 30s timeout: 10s start_period: 5s diff --git a/fixed_api_call.js b/fixed_api_call.js new file mode 100644 index 0000000..50a2a2c --- /dev/null +++ b/fixed_api_call.js @@ -0,0 +1,39 @@ +// Fixed API call script for your workflow +export const code = async (inputs) => { + const { diagram, format } = inputs; + + // diagram is now your exact multiline DSL (including any %%init%% lines) + if (!diagram || !diagram.trim()) { + throw new Error("No Mermaid input provided"); + } + + // Ensure proper newlines are preserved and normalize line endings + const normalizedDiagram = diagram + .replace(/\r\n/g, '\n') // Convert Windows line endings + .replace(/\r/g, '\n') // Convert old Mac line endings + .trim(); // Remove leading/trailing whitespace + + // Log for debugging + console.log("Sending diagram:"); + console.log(JSON.stringify(normalizedDiagram)); + + const url = `https://diagrams.starbit.cloud/generate?type=${encodeURIComponent(format)}`; + const resp = await fetch(url, { + method: "POST", + headers: { + "Content-Type": "text/plain; charset=utf-8" // Explicit charset + }, + body: normalizedDiagram, // <-- send the normalized, multi-line DSL + }); + + if (!resp.ok) { + const txt = await resp.text(); + throw new Error(`Mermaid-server error ${resp.status}: ${txt}`); + } + + const buffer = Buffer.from(await resp.arrayBuffer()); + const mime = format === "png" ? "image/png" : "image/svg+xml"; + const file = `data:${mime};base64,${buffer.toString("base64")}`; + + return { file }; +}; diff --git a/internal/diagram.go b/internal/diagram.go index 9e836dc..8473e96 100644 --- a/internal/diagram.go +++ b/internal/diagram.go @@ -4,6 +4,7 @@ import ( "crypto/md5" "encoding/base64" "encoding/hex" + "fmt" "strings" "sync" "time" @@ -11,8 +12,17 @@ import ( // NewDiagram returns a new diagram. func NewDiagram(description []byte, imgType string) *Diagram { + // Debug: Log what we received + fmt.Printf("DEBUG: Received %d bytes\n", len(description)) + fmt.Printf("DEBUG: Raw bytes: %q\n", string(description)) + fmt.Printf("DEBUG: Contains newlines: %t\n", strings.Contains(string(description), "\n")) + + trimmed := strings.TrimSpace(string(description)) + fmt.Printf("DEBUG: After TrimSpace: %q\n", trimmed) + fmt.Printf("DEBUG: Still contains newlines: %t\n", strings.Contains(trimmed, "\n")) + return &Diagram{ - description: []byte(strings.TrimSpace(string(description))), + description: []byte(trimmed), lastTouched: time.Now(), mu: &sync.RWMutex{}, imgType: imgType, diff --git a/simple_working_chart.mmd b/simple_working_chart.mmd new file mode 100644 index 0000000..762f304 --- /dev/null +++ b/simple_working_chart.mmd @@ -0,0 +1,10 @@ +graph TD + A[Website Analytics] --> B[Traffic: 1.2M visitors] + A --> C[Revenue: $450K] + A --> D[Growth: +25%] + B --> E[Desktop: 60%] + B --> F[Mobile: 40%] + C --> G[Q1: $95K] + C --> H[Q2: $115K] + C --> I[Q3: $125K] + C --> J[Q4: $115K] diff --git a/test_url_encoding.js b/test_url_encoding.js new file mode 100644 index 0000000..b43e74f --- /dev/null +++ b/test_url_encoding.js @@ -0,0 +1,30 @@ +// Test URL encoding to see if this preserves newlines properly +const diagram = `graph TD + A[Website Analytics] --> B[Traffic] + A --> C[Revenue]`; + +console.log("Original diagram:"); +console.log(JSON.stringify(diagram)); + +console.log("\nURL encoded:"); +const encoded = encodeURIComponent(diagram); +console.log(encoded); + +console.log("\nDecoded back:"); +const decoded = decodeURIComponent(encoded); +console.log(JSON.stringify(decoded)); + +console.log("\nAre they equal?", diagram === decoded); + +// Show what the healthcheck URL looks like +const healthcheckDiagram = "graph TD\n A[Test]"; +const healthcheckEncoded = encodeURIComponent(healthcheckDiagram); +console.log("\nHealthcheck diagram encoded:"); +console.log(healthcheckEncoded); + +// Test the exact healthcheck URL from docker-compose +const dockerHealthcheck = "graph%20TD%0A%20%20%20%20A%5BTest%5D"; +console.log("\nDocker healthcheck URL param:"); +console.log(dockerHealthcheck); +console.log("Decoded:"); +console.log(decodeURIComponent(dockerHealthcheck)); diff --git a/test_workflow_format.js b/test_workflow_format.js new file mode 100644 index 0000000..520219a --- /dev/null +++ b/test_workflow_format.js @@ -0,0 +1,42 @@ +// Test script that mimics your workflow exactly +const diagram = `graph TD + A[Website Analytics] --> B[Traffic] + A --> C[Revenue] + B --> D[Desktop] + B --> E[Mobile]`; + +console.log("Raw diagram string:"); +console.log(JSON.stringify(diagram)); +console.log("\nDiagram content:"); +console.log(diagram); +console.log("\nLength:", diagram.length); + +// Test the conversion step +const convertMermaidBlock = (inputs) => { + const raw = String(inputs.diagram || "").trim(); + if (!raw) throw new Error("No Mermaid input provided"); + return { rawDsl: raw }; +}; + +// Test the API call step +const makeApiCall = async (inputs) => { + const { diagram, format } = inputs; + + if (!diagram || !diagram.trim()) { + throw new Error("No Mermaid input provided"); + } + + console.log("Sending to API:"); + console.log("URL: https://diagrams.starbit.cloud/generate?type=" + encodeURIComponent(format)); + console.log("Content-Type: text/plain"); + console.log("Body:", JSON.stringify(diagram)); + + return { success: true }; +}; + +// Run the test +const result1 = convertMermaidBlock({ diagram }); +console.log("\nStep 1 result:", result1); + +const result2 = makeApiCall({ diagram: result1.rawDsl, format: "svg" }); +console.log("\nStep 2 result:", result2); diff --git a/working_analytics_chart.mmd b/working_analytics_chart.mmd new file mode 100644 index 0000000..2eb2037 --- /dev/null +++ b/working_analytics_chart.mmd @@ -0,0 +1,23 @@ +%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#1f77b4", "primaryTextColor": "#fff", "primaryBorderColor": "#ff7f0e", "lineColor": "#2ca02c"}}}%% +flowchart TD + A["📊 Website Analytics Dashboard
2024 Performance"] --> B["👥 Traffic Metrics"] + A --> C["📈 Growth Analysis"] + A --> D["🎯 Conversion Data"] + + B --> E["Unique Visitors: 1.2M
↗️ +25% from 2023"] + B --> F["Page Views: 2.8M
↗️ +32% from 2023"] + B --> G["Sessions: 950K
↗️ +18% from 2023"] + + C --> H["Q1: 285K visitors
Growth: +15%"] + C --> I["Q2: 312K visitors
Growth: +22%"] + C --> J["Q3: 335K visitors
Growth: +28%"] + C --> K["Q4: 268K visitors
Growth: +35%"] + + D --> L["Conversion Rate: 3.2%
↗️ +0.8% improvement"] + D --> M["Revenue: $450K
↗️ +42% increase"] + D --> N["AOV: $125
↗️ +12% increase"] + + style A fill:#e1f5fe,stroke:#01579b,stroke-width:3px + style B fill:#f3e5f5,stroke:#4a148c,stroke-width:2px + style C fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px + style D fill:#fff3e0,stroke:#e65100,stroke-width:2px diff --git a/working_bar_chart.mmd b/working_bar_chart.mmd new file mode 100644 index 0000000..6ac312f --- /dev/null +++ b/working_bar_chart.mmd @@ -0,0 +1,8 @@ +%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#ff6b6b", "primaryTextColor": "#fff", "primaryBorderColor": "#ff4757"}}}%% +gitGraph + commit id: "Jan: 45K visitors" + commit id: "Feb: 52K visitors" + commit id: "Mar: 48K visitors" + commit id: "Apr: 67K visitors" + commit id: "May: 72K visitors" + commit id: "Jun: 85K visitors"