CODEWITHSUNDEEP
cssumlsequence-diagram
mwpeng 彭明伟
mwpeng 彭明伟

Reputation: 96

Insert a line between two element using css

I'm editing a sequence diagram on https://app.zenuml.com/ with the code like this :

// This is a sample
A.method() {

}

A.anotherMethod() {

}

In the diagram rendered, I want to insert a solid line between the two methods. enter image description here

It looks like ZenUml has CSS support, to change the style of the diagram. I wondering whether adding a line is also can be done using CSS.

The generated DOM is like below. You can check it out from https://app.zenuml.com by pasting the above DSL in the editor.

<div data-v-6909fd0d="" class="message-layer">
    <div data-v-6909fd0d="" style="padding-left: 4px;">
        <div>
            <div data-v-44cbabc4="" signature="method()" class="interaction sync" style="width: 128px;">
                <!---->
                <div data-v-50fe6874="" data-v-44cbabc4="" class="message" style="border-bottom-style: solid;">
                    <div data-v-50fe6874="" class="name">method()</div>
                    <div data-v-102217b1="" data-v-50fe6874="" class="point fill"><svg data-v-102217b1="" height="20"
                            class="arrow">
                            <polyline data-v-102217b1="" points="0,7 10,13 0,19" class="right"></polyline>
                            <polyline data-v-102217b1="" points="10,7 0,13 10,19" class="left"></polyline>
                        </svg></div>
                </div>
                <div data-v-a0d3b81a="" data-v-44cbabc4="" class="occurrence">
                    <div data-v-a0d3b81a=""></div>
                </div>
                <!---->
            </div>
        </div>
        <div>
            <div data-v-44cbabc4="" signature="anotherMethod()" class="interaction sync" style="width: 128px;">
                <!---->
                <div data-v-50fe6874="" data-v-44cbabc4="" class="message" style="border-bottom-style: solid;">
                    <div data-v-50fe6874="" class="name">anotherMethod()</div>
                    <div data-v-102217b1="" data-v-50fe6874="" class="point fill"><svg data-v-102217b1="" height="20"
                            class="arrow">
                            <polyline data-v-102217b1="" points="0,7 10,13 0,19" class="right"></polyline>
                            <polyline data-v-102217b1="" points="10,7 0,13 10,19" class="left"></polyline>
                        </svg></div>
                </div>
                <div data-v-a0d3b81a="" data-v-44cbabc4="" class="occurrence">
                    <div data-v-a0d3b81a=""></div>
                </div>
                <!---->
            </div>
        </div>
    </div>
</div>

Upvotes: 2

Views: 272

Answers (3)

Code...
Code...

Reputation: 114

Try using <hr>. You cannot make a element in CSS, but you can change the style of one. If you used the javascript of document.createElement(hr[, options]), you can do it, but without CSS.

Upvotes: 0

Ray Butterworth
Ray Butterworth

Reputation: 618

For a proper answer, we'd need to see what HTML is actually generated.

But assuming the two "methods" as you call them are identified by class ".method", then CSS like this:

.method + .method { margin-top: 1em; }

would insert a full height empty line between any two consecutive "method"s.

EDIT:

Unfortunately the generated code doesn't provide "class=" on the relevant divs. You'd have to do something like this:

.message-layer  div  div+div  { margin-top: 1em; }

Upvotes: 1

sao
sao

Reputation: 1821

first off, the question seems confusing. i don't see any HTML elements.

but, as for making a line with CSS:

  1. add a div
  2. make it one or 2 pixels high (assuming a horizontal line)
  3. make the width as long as you want and use margin:auto; to center
  4. fill it black (or whatever color you prefer)

Upvotes: 0

Related Questions