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

text of mermaid div displayed on page #186

Closed
barttt opened this issue Jul 10, 2015 · 4 comments
Closed

text of mermaid div displayed on page #186

barttt opened this issue Jul 10, 2015 · 4 comments

Comments

@barttt
Copy link

barttt commented Jul 10, 2015

THanks for producing this library-
And for your previous help.
I found that my rendering issue was the lack of a stylesheet callout for mermaid.css.
My current issue is that the text of the mermaid div is displayed above the diagram that is rendered.
Is there a way to stop this?
Thanks
@knsv
Copy link
Collaborator

knsv commented Jul 11, 2015

Maybe in your context it would make sense to only use the api functions. That would mean that you call a render function with a graph definition that you fetch from your page yourself. In return you get the graph definition.

Then you have the control of whats going on on the page. A small example below that takes a graph definition renders it and prints the generated svg to the console.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="bower_components/mermaid/dist/mermaidAPI.js"></script>

    <script>
        mermaidAPI.initialize({
            startOnLoad:true
        });
        $(function(){
            var graphDefinition = 'graph TB\na-->b';
            var cb = function(svgGraph){
                console.log(svgGraph);
            }
            mermaidAPI.render('id1',graphDefinition,cb);
        });
    </script>
</head>
    <body>

    </body>
</html>

I hope this helps.

Knut Sveidqvist
Sent with Sparrow (http://www.sparrowmailapp.com/?sig)

On Friday 10 July 2015 at 23:19, barttt wrote:

THanks for producing this library-
And for your previous help.
I found that my rendering issue was the lack of a stylesheet callout for mermaid.css.
My current issue is that the text of the mermaid div is displayed above the diagram that is rendered.
Is there a way to stop this?
Thanks

—
Reply to this email directly or view it on GitHub (#186).

@barttt
Copy link
Author

barttt commented Jul 13, 2015

THanks Knut-
An excellent idea as I need to ultimately use Ajax on this page anyway.

@knsv
Copy link
Collaborator

knsv commented Jul 15, 2015

Info about the render function in the mermaidAPI. Unsure how clear this is described in the docs.

/**
 * Function that renders an svg with a graph from a chart definition.
 * @param id - the id of the element to be rendered
 * @param txt - the graph definition
 * @param cb - callback which is called after rendering is finished with the svg code as inparam.
 * @param container - selector to element in which a div with the graph temporarily will be inserted. In one is
 * provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is 
 * completed.
 */

@knsv
Copy link
Collaborator

knsv commented Oct 4, 2015

Will close this one now. Let me know if you still are have problems with this.

@knsv knsv closed this as completed Oct 4, 2015
mgenereu pushed a commit to mgenereu/mermaid that referenced this issue Jun 25, 2022
@sidharthv96
Merge pull request mermaid-js#186 from mermaid-js/develop
09c3fbb 
Develop
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
2 participants
@knsv @barttt