Code Monkey home page Code Monkey logo

Comments (5)

atmclarke avatar atmclarke commented on June 15, 2024

Same for me in 1.27.2

from yuml-diagram.

DavidBurela avatar DavidBurela commented on June 15, 2024

Came here to ask the same thing. Sequence diagrams don't seem to have arrows.

from yuml-diagram.

aduh95 avatar aduh95 commented on June 15, 2024

I don't have issues with the direction arrows, both with dark mode and light mode when generating SVG with the node API. However, if I try to add SVG elements in the same DOM using both modes, the latter one's arrows are not displayed.

const yuml_diagram = require("yuml-diagram");

const sequence_diagram = `
// {type:sequence}
[:Computer]sendUnsentEmail>[:Server]
[:Computer]newEmail>[:Server]
[:Server]reponse.>[:Computer]
[:Computer]downloadEmail>[:Server]
[:Computer]deleteOldEmail>[:Server]
`;

var yuml = new yuml_diagram();
var svgLightBg = yuml.processYumlDocument(sequence_diagram, false);
var svgDarkBg = yuml.processYumlDocument(sequence_diagram, true);

console.log(`<body bgcolor="#000">${svgLightBg}${svgDarkBg}</body>`);

On this example, we can see that the black arrows (which should be used for the "light mode") are used for both SVGs. I think it comes from the fact the same ID attributes are used for both theme and no sandboxing is made by the rendering engine.

yuml-diagram/src/svg-builder.js

Lines 108 to 117 in d0dc8fb

filledArrow.setAttribute('id', 'arrow-filled');
filledArrow.setAttribute('refX', '6');
filledArrow.setAttribute('refY', '3');
filledArrow.setAttribute('markerWidth', '6');
filledArrow.setAttribute('markerHeight', '6');
filledArrow.setAttribute('orient', 'auto');
filledArrowPath.setAttribute('style', 'stroke: none; fill: ' + (isDark ? 'white;' : 'black;'));
openArrow.setAttribute('id', 'arrow-open');

This explains why some users rapport missing arrows on the related VSCode extension as both light mode and dark mode SVG are added to the DOM; users with a dark theme won't be able to see the arrows because of the ID name clash.

To fix this issue, either we need to specify that mixing light and dark mode is not supported, either we need to somehow namespace the ID attributes to avoid the name clash.

from yuml-diagram.

DavidBurela avatar DavidBurela commented on June 15, 2024

Thanks that does seems to be the root cause and means I have a workaround.

Repo of bug:
Create a .MD file in VS Code, set theme to dark. Use this diagram (removing the . ). Then preview the file

. ```yuml
// {type: sequence}

[Patron]order food>[Waiter]
[Waiter]serve wine.>[Patron]
[Patron]pay bill>>[Waiter]

. ```

Workaround:
Set VS Code theme to light

from yuml-diagram.

jaime-olivares avatar jaime-olivares commented on June 15, 2024

Please let me know if the issue has gone.

from yuml-diagram.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.