스타일
도형의 스타일은 style 필드 아래에서 다음 예약 키워드들로 설정합니다.
아래에 소개될 것들은 이 기본 다이어그램들에 개별적으로 적용되는 모든 유효한 스타일의 카탈로그입니다.
이번 챕터의 SVG 이미지들은 direction: right으로 렌더링되지만 간결성을 위해 스크립트에서는 생략되었습니다.
Style keywords
- opacity
- stroke
- fill (도형에만 적용됨)
- fill-pattern (도형에만 적용됨)
- stroke-width
- stroke-dash
- border-radius
- shadow (도형에만 적용됨)
- 3D (직사각형/사각형에만 적용됨)
- multiple (도형에만 적용됨)
- double-border (직사각형/타원에만 적용됨)
- font
- font-size
- font-color
- animated (연결에만 적용됨)
- bold, italic, underline
- text-transform
- root
Opacity
객체의 투명도를 0과 1 사이의 값으로 설정합니다.
Stroke
객체의 테두리 색상을 CSS 색상명 또는 16진수 코드로 설정합니다.
sql_table과 class의 경우, stroke는 바디에 fill로 적용됩니다.
fill은 헤더의 fill을 설정하는 데 사용되기 떄문입니다.
Fill
객체의 내부 색상을 CSS 색상명 또는 16진수 코드로 설정합니다.
sql_table 및 class의 경우 fill이 헤더에 적용됩니다.
투명함을 원한다면 다음과 같이 설정해주세요.
Fill Pattern
객체의 내부를 특정 패턴으로 채웁니다.
사용 가능한 패턴:
dotslinesgrain
(이 페이지에서 쓰인 테마에서는 fill-pattern이 어떻게 적용되는지 잘 보이지 않습니다.
이 사이트에서 테스트해보세요.)
Stroke Width
객체의 테두리 두께를 1과 15 사이의 정수로 설정합니다.
Stroke Dash
객체의 테두리를 파선으로 만듭니다.
0과 10 사이의 정수로 파선 내의 선 간격을 설정합니다.
Border Radius
객체의 테두리 모서리 곡률을 0과 20 사이의 정수로 설정합니다.
연결에 "코너"가 적용되는 레이아웃 엔진(예: ELK)의 경우, border-radius는 연결에도 적용할 수 있습니다.
매우 높은 값으로 설정할 경우 도형이 알약 형태가 됩니다.
Shadow
true, false로 그림자를 설정합니다.
3D
true, false로 3D 효과를 설정합니다.
Multiple
true, false로 객체를 여러 개가 겹쳐진 형태로 설정합니다.
Double Border
true, false로 객체의 테두리를 쌍테두리로 설정합니다.
Font
객체 내 글씨체를 설정합니다.
현재 존재하는 글씨체 옵션은 mono 뿐입니다.
앞으로 있을 업데이트를 기대해주세요.
Font Size
객체 내 글씨체 크기를 8과 100 사이의 정수로 설정합니다.
Font Color
객체 내 글씨체 색상을 CSS 색상 이름 또는 16진수 코드로 설정합니다.
sql_table 및 class의 경우 font-color는 헤더 텍스트에만 적용됩니다(테마는 바디의 내의 색상을 제어합니다).
Animated
true, false로 애니메이션 효과를 설정합니다.
Bold, italic, underline
true, false로 텍스트 형태를 설정합니다.
Text transform
text-transform은 레이블의 대소문자를 변환합니다.
uppercaselowercasetitlenone(특수 테마가 적용됐을 경우 적용되는 대문자화를 무효화하는 데 사용됩니다.)
Root
일부 스타일은 전체 범위(root level)에서 적용 가능합니다.
예를 들어 다이어그램의 배경색을 설정하려면 style.fill을 사용하세요.
현재 지원되는 키워드 세트는 다음과 같습니다.
fill: 다이어그램 배경색fill-pattern: 배경 패턴stroke: 다이어그램 프레임stroke-widthstroke-dashdouble-border
이 문서의 모든 다이어그램은 pad=0(환경 변수)으로 렌더링됩니다.