Issue on Dynamic Creation in PHP

[gar-syn]

So I am "dynamically" creating a flow chart through PHP. I'm looping through a JSON object and then this is the input for ajax in JS. However when the flowchart is created I get a parse error and I don't know why.

Below is a summary of what I'm doing.

PHP

    echo "graph TB", PHP_EOL;
    echo "subgraph Hood One", PHP_EOL;

    if ($number_of_devices > 0)
    {
        for ($i = 0; $i < $number_of_devices; $i++) {
            echo "id" . $jsonEquipmentDecoded[$i]->array_pos . "[<center><img src='" . $jsonEquipmentDecoded[$i]->symbol_img_location . "' height='50'></br>" . $jsonEquipmentDecoded[$i]->display_name . ($jsonEquipmentDecoded[$i]->device_data->equipment_properties->has_location === true ? "</br>". $jsonEquipmentDecoded[$i]->location  : "") . "</center>]", PHP_EOL;
        }
    }

    echo "end", PHP_EOL;

JS (Used the example in here)

                $.ajax({
                    type: "POST",
                    url: "templates/experiment-parameters/equipment-diagram-mermaid.php",
                    data: {current_selection: completeJsonObject},
                    success: function(data){
                        var needsUniqueId = "render" + (Math.floor(Math.random() * 10000)).toString(); //should be 10K attempts before repeat user finger stops working before then hopefully
                        mermaid.mermaidAPI.render(needsUniqueId, data, mermaidApiRenderCallback);

                        function mermaidApiRenderCallback(graph) {
                            $('#id_equipment_diagram').html(graph);
                        }
                    }
                });

What the PHP creates

graph TB
subgraph Hood One
id2[<center><img src='img/symbols/Pump.svg' height='50'></br>Hitec-Zang SyrDos2</br>192.168.174.253:4002</center>]
id1[<center><img src='img/symbols/Pump.svg' height='50'></br>Hitec-Zang SyrDos2</br>192.168.174.253:4001</center>]
id4[<center><img src='img/symbols/microreactor.png' height='50'></br>Microreactor</center>]
id3[<center><img src='img/symbols/ir.svg' height='50'></br>Mettler IR</br>192.168.174.123</center>]
end

And the output is correct -

And the error -

Uncaught Error: Parse error on line 1:

^
Expecting 'NEWLINE', 'SPACE', 'GRAPH', got 'EOF'
    at Parser.parseError (mermaid.js:65625)
    at Parser.parse (mermaid.js:65716)
    at Object.getClasses (mermaid.js:65014)
    at Object.render (mermaid.js:71583)
    at _loop (mermaid.js:71068)
    at Object.init (mermaid.js:71078)
    at contentLoaded (mermaid.js:71113)
    at mermaid.js:71131

[gar-syn]

So the issue was lying with having the div class set as mermaid with no content in it. Remove the class reference and let the javascript do the magic.