Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot read property 'replace' of undefined #239

Closed
briannc29 opened this issue Oct 29, 2015 · 6 comments
Closed

Cannot read property 'replace' of undefined #239

briannc29 opened this issue Oct 29, 2015 · 6 comments

Comments

@briannc29
Copy link

I try the sample code on doc and I got the error : "cannot read property 'replace' of undefined". The error at the line mermaidAPI.render(). How to fix it?

<head>
    <meta charset="UTF-8">
    <script src="jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="mermaid.css" />
    <script src="mermaidAPI.js"></script>

    <script>
        mermaidAPI.initialize({
            startOnLoad:false
        });
        // Example of using the API
        $(function(){
            var graphDefinition = 'graph TB\na-->b';
            var graph = mermaidAPI.render(graphDefinition);
            $("#graphDiv").html(graph);
        });

    </script>
</head>
<body>

    <div class="mermaid" id="graphDiv">

    </div>

</body>
</html>
@knsv
Copy link
Collaborator

knsv commented Oct 29, 2015

Small change in the render call:

    <script>
        mermaidAPI.initialize({
            startOnLoad:false
        });
        $(function(){
        // Example of using the API
            var element = document.querySelector("#graphDiv");

            var insertSvg = function(svgCode, bindFunctions){
                element.innerHTML = svgCode;
            };

            var graphDefinition = 'graph TB\na-->b';
            var graph = mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
        });
    </script>

I noticed the docs was not updated. Will update them.

@tylerlong
Copy link
Collaborator

Hi @knsv ,

I thought mermaidAPI.js was generating HTML on server side (aka, node.js). If mermaidAPI.js still depends on DOM (document, innerHTML...etc), what's the advantage of it over mermaid.js ?

With mermaid.js, I can do the following which is simpler and more straightforward:

<script src="jquery.js"></script>
<script>
$('#graphDiv').text('graph TB\na-->b');
$('#graphDiv').addClass('mermaid');
mermaid.init();
</script>

update

I just found this todo item: https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js#L461
So rendering on server side is not possible currently.

I think the point of mermaidAPI.js is: with the graph object, you can decide what to do

either insert it somewhere in the page or something completely different.

Quoted from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js#L11

I think the old API is better:

var graphDefinition = 'graph TB\na-->b';
var graph = mermaidAPI.render(graphDefinition);
$("#graphDiv").html(graph);

@knsv
Copy link
Collaborator

knsv commented Nov 4, 2015

The origins of the API was to separate the site integrations from the rendering of diagrams. The idea was to make complex integrations easier and somewhat cleaner and at the same time not inpose more complexity in the original style of integration which was starting to happen.

All that said, I have no plans of removing the original integration as in your first example. The two integration style will live on side by side. mermaid.init in tun uses the API for generation the graph so there are no code duplication due to this.

@tylerlong
Copy link
Collaborator

Understood. I still have two questions:

  1. why did you remove the following API:
var graphDefinition = 'graph TB\na-->b';
var graph = mermaidAPI.render(graphDefinition);
$("#graphDiv").html(graph);
  1. I tried var graph = mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
    graph is undefined which means mermaidAPI.render returns nothing. Is it by design?

@knsv
Copy link
Collaborator

knsv commented Nov 4, 2015

I see what you mean now.

I had some issues with asynchronous rendering it was not always ready rendered straight away. This had to do with subgraphs and dagre-d3. That is no longer the case thanks to a new version of dagre-d3.

Perhaps a straight forward way would be to return as you propose when no callback is supplied. Easier interface and still backwards compatible.

knsv added a commit that referenced this issue Nov 15, 2015
@knsv
Fix for issues #239 and #257.
4eb38e4
@knsv
Copy link
Collaborator

knsv commented Nov 22, 2015

Closing issue as it's resolution is included in release 0.5.6. Let me know if you do not agree.

@knsv knsv closed this as completed Nov 22, 2015
mgenereu pushed a commit to mgenereu/mermaid that referenced this issue Jun 25, 2022
@sidharthv96
Merge pull request mermaid-js#239 from mermaid-js/dependabot/npm_and_…
79850ec 
…yarn/develop/typescript-eslint/eslint-plugin-4.28.1

Bump @typescript-eslint/eslint-plugin from 4.28.0 to 4.28.1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@tylerlong @knsv @briannc29