பாணி தாள்கள்¶

காஃபர் 2.0 என்பதால், வரைபடங்கள் பாணி தாள்கள் மூலம் வேறுபட்ட தோற்றத்தைக் கொண்டிருக்கலாம். பாணி தாள்கள் அடுக்கு பாணி தாள்கள் (சிஎச்எச்) தொடரியல் பயன்படுத்துகின்றன. மார்க்அப் மொழியில் எழுதப்பட்ட ஆவணத்தின் விளக்கக்காட்சியை விவரிக்க சிஎச்எச் பயன்படுத்தப்படுகிறது, மேலும் இது பொதுவாக வலைப்பக்கங்களுக்கு உஉகுமொ உடன் பயன்படுத்தப்படுகிறது.

[W3C சிஎச்எச் முகப்பு பக்கம்] (https://www.w3.org/style/css/overview.en.html) இல், சிஎச்எச் இவ்வாறு விவரிக்கப்பட்டுள்ளது:

அடுக்கு பாணி தாள்கள் (CSS) என்பது வலை ஆவணங்களில் பாணியை (எ.கா., எழுத்துருக்கள், வண்ணங்கள், இடைவெளி) சேர்ப்பதற்கான ஒரு எளிய வழிமுறையாகும்.

அதன் பயன்பாடு வலை ஆவணங்களுக்கு அப்பாற்பட்டது. வரைபடங்களில் உள்ள உருப்படிகளுக்கு பாணி கூறுகளை வழங்க கஃபர் சிஎச்எச் ஐப் பயன்படுத்துகிறது. சிஎச்எச் எங்கள் வரைபடங்களின் காட்சி தோற்றத்தை மாற்ற, கஃபரின் பயனர்களைப் பயன்படுத்த அனுமதிக்கிறது. வரைபடங்களைப் படிப்பதை எளிதாக்குவதற்கு வண்ணம் மற்றும் வரி பாணிகளை மாற்றலாம்.

நாங்கள் ஒரு வரைபடத்துடன் கையாள்வதால், ஒரு உஉகுமொ ஆவணம் அல்ல, சில சிஎச்எச் நற்பொருத்தங்கள் விடப்பட்டுள்ளன.

பாணி மாதிரியின் ஒரு பகுதியாகும், எனவே ஒரு மாதிரியில் பணிபுரியும் அனைவருக்கும் ஒரே பாணியைக் கொண்டிருக்கும். பாணியைத் திருத்த, கஃபரில் மேல் வலது மூலையில் உள்ள கருவிகள் பக்க பொத்தானை அழுத்தவும்:

ஒரு வகுப்பின் பின்னணி நிறத்தை எவ்வாறு மாற்றுவது என்பதற்கான எளிய எடுத்துக்காட்டு இங்கே:

class {
  background-color: beige;
}

அல்லது ஒரு கூறுகளின் நிறத்தை மாற்றவும், அது ஒரு முனையில் கூடு கட்டும்போது மட்டுமே:

node component {
  background-color: skyblue;
}

வரைபடம் ஒரு சிஎச்எச் முனையாகவும் வெளிப்படுத்தப்படுகிறது. "இருண்ட" பாணியை வரையறுப்பது மிகவும் எளிதானது:

diagram {
  background-color: #343131;
}

* {
  color: white;
  text-color: white;
}

இங்கே நீங்கள் ஏற்கனவே முதல் தனிப்பயன் பண்புக்கூறு: உரை-வண்ணம். ஒரு பொருளில் வரையப்பட்ட உரையின் நிறத்தை கட்டுப்படுத்த இந்த சொத்து உங்களை அனுமதிக்கிறது. வரைபட உருப்படியின் தளவமைப்பை உருவாக்கும் வரிகளுக்கு (பக்கவாதம்) வண்ணம் பயன்படுத்தப்படுகிறது.

உதவி தேர்வாளர்கள்¶

நாங்கள் வரைபடங்கள் மற்றும் மாதிரிகள் கையாள்வதால், சிஎச்எச் இன் அனைத்து அம்சங்களும் எங்களுக்கு தேவையில்லை. கஃபர் ஆதரிக்கும் அனைத்து சிஎச்எச் அம்சங்களின் சுருக்கத்தையும் கீழே காணலாம்.

`*`	வரைபடத்தில் உள்ள அனைத்து உருப்படிகளும் வரைபடம் உட்பட.
`node component`	ஒரு முனையின் வழித்தோன்றல் எந்தவொரு கூறு உருப்படியும்.
`node > component`	ஒரு முனை குழந்தையாக இருக்கும் ஒரு கூறு உருப்படி.
`.item`	Each diagram item has a class "item" assigned. This makes it easy to differentiate them from e.g. name elements.
`பொதுமைப்படுத்தல்[பொருள்]`	தற்போது ஒரு பாடத்துடன் பொதுமைப்படுத்தல் உருப்படி.
`வகுப்பு[பெயர்=பூ]`	"ஃபூ" என்ற பெயருடன் ஒரு வகுப்பு.
`வரைபடம்[பெயர்^=வரைவு]`	"வரைவு" உடன் தொடங்கும் பெயரைக் கொண்ட வரைபடம்.
`வரைபடம்[பெயர்$=வரைவு]`	ஒரு பெயரைக் கொண்ட வரைபடம் "வரைவு" உடன் முடிகிறது.
`வரைபடம்[பெயர்*=வரைவு]`	"வரைவு" என்ற உரையைக் கொண்ட பெயரைக் கொண்ட வரைபடம்.
`வரைபடம்[பெயர்~=வரைவு பொருள்]`	"வரைவு" அல்லது "உருப்படி" என்ற பெயரைக் கொண்ட வரைபடம்.
`வரைபடம்[பெயர்\|=வரைவு]`	ஒரு பெயரைக் கொண்ட வரைபடம் "வரைவு" அல்லது "வரைவு-" உடன் தொடங்குகிறது.
`:focus`	கவனம் செலுத்திய உருப்படி. பிற போலி வகுப்புகள்: `:active` தேர்ந்தெடுக்கப்பட்ட உருப்படிகள் சுட்டியின் கீழ் உள்ள உருப்படிக்கு `:hover` ஒரு உருப்படி இழுக்கப்பட்டு இந்த உருப்படியில் கைவிடப்பட்டால் `:drop` கைப்பிடி இயக்கத்தின் போது ஒரு உறுப்பு சாம்பல் நிறமாக இருந்தால் `:disabled`
`:empty`	வரைபடத்தில் குழந்தை முனைகள் இல்லாத முனை.
`:root`	வரைபடத்தை குறிக்கிறது. இது வரைபடத்திற்கு மட்டுமே பொருந்தும்
`:first-child`	உடன்பிறப்பு ஒரு குழுவில் ஒரு முனை முதல் உறுப்பு.
`:has()`	உருப்படியில் வழங்கப்பட்ட தேர்வாளர்கள் எவரும் உள்ளனர். எ.கா. `node:has(component)`: ஒரு கூறு உருப்படியைக் கொண்ட ஒரு முனை.
`:is()`	வழங்கப்பட்ட தேர்வாளர்களில் எவரையும் பொருத்தவும். எ.கா. `:is(node, subsystem) > component`: ஒரு முனை அல்லது துணை அமைப்பு.
`:not()`	தேர்வாளரை மறுக்கவும். எ.கா. `:not([subject])`: "பொருள்" இல்லாத எந்தவொரு பொருளும்.
`::after`	உரைக்குப் பிறகு கூடுதல் உள்ளடக்கத்தை வழங்கவும். `content` சொத்து மட்டுமே ஆதரிக்கப்படுகிறது.

The official specification of CSS3 பண்புக்கூறு selectors.
கஃபர் முழுமையின் பொருட்டு | = பண்புக்கூறு தேர்வாளரை வழங்குகிறது. இந்த சூழலில் இது மிகவும் பயனுள்ளதாக இல்லை.
வரைபட உருப்படிகளுக்கான ஐடிகளை கஃபர் சிஎச்எச் ஆதரிக்காது என்பதை நினைவில் கொள்க, எனவே ஐடிகளுக்கான சிஎச்எச் தொடரியல் (#சில-ஐடி) பயன்படுத்தப்படவில்லை. மேலும், வகுப்பு தொடரியல் (. சில வகுப்பு) தற்போது ஆதரிக்கப்படவில்லை.

பாணி பண்புகள்¶

சிஎச்எச் பண்புகள் மற்றும் சில காஃபர் குறிப்பிட்ட பண்புகளின் துணைக்குழுவை GAPHOR ஆதரிக்கிறது. பாணி சீட் மொழிபெயர்ப்பாளர் ஒப்பீட்டளவில் நேராக முன்னோக்கி உள்ளது. அனைத்து அகலங்களும், உயரங்களும் அளவுகளும் பிக்சல்களில் அளவிடப்படுகின்றன. எழுத்துரு குடும்பம், அளவு, எடை ஆகியவற்றைக் கொண்டிருக்கக்கூடிய HTML/CSS இல் உள்ள எழுத்துரு சொத்து போன்ற சிக்கலான பாணி அறிவிப்புகளை நீங்கள் பயன்படுத்த முடியாது.

சில பண்புகள் பெற்றோர் பாணியிலிருந்து பெறப்பட்டவை. பெற்றோர் பெரும்பாலும் ஒரு வரைபடம். வரைபடம் இல் வண்ணம் அல்லது எழுத்துரு-குடும்பம் அமைக்கும் போது, அது வரைபடத்தில் உள்ள உருப்படிகளுக்கு பரவுகிறது.

நிறங்கள்¶

`background-color`	எடுத்துக்காட்டுகள்: `background-color: azure;` `background-color: rgb(255, 255, 255);` `background-color: hsl(130, 95%, 10%);`
`color`	கோடுகளுக்குப் பயன்படுத்தப்படும் நிறம். (மரபுரிமை)
`text-color`	உரைக்கான நிறம். (மரபுரிமை) Deprecated since version 2.23.0: முடிந்தால் வண்ணத்தைப் பயன்படுத்துங்கள்.
`opacity`	வண்ண ஒளிபுகா காரணி (`0.0` - `1.0`), எல்லா வண்ணங்களுக்கும் பயன்படுத்தப்படுகிறது.

சிஎச்எச் ஆவணத்தில் விவரிக்கப்பட்டுள்ளபடி, ஒரு வண்ணம் CSS3 வண்ணக் குறியீடு இருக்கலாம். Kaphor அனைத்து வண்ணக் குறிப்புகளையும் ஆதரிக்கிறது: rgb (), rgba (), hsl (), hsla (), ஃச் குறியீடு (#ffffff) மற்றும் வண்ண பெயர்கள்.

உரை மற்றும் எழுத்துருக்கள்¶

`font-family`	ஒரு எழுத்துரு பெயர் (எ.கா. `sans`, `serif`, `courier`). (மரபுரிமை)
`font-size`	ஒரு முழுமையான அளவு (எ.கா. `14`) அல்லது அளவு மதிப்பு (எ.கா. `small`). (மரபுரிமை)
`font-style`	ஒன்று `normal` அல்லது `italic`. (மரபுரிமை)
`font-weight`	normalஇயல்பானது` அல்லதுbold``. (மரபுரிமை)
`text-align`	ஒன்று `left`, `center`, `right`. (மரபுரிமை)
`text-decoration`	ஒன்று none` அல்லது underline``.
`vertical-align`	உரைக்கான செங்குத்து சீரமைப்பு. ஒன்று `top`, `middle` அல்லது `bottom`.
`vertical-spacing`	படவுரு போன்ற உருப்படிகளுக்கு செங்குத்து இடைவெளியை அமைக்கவும் (நடிகர்கள், ச்டேட் ச்டேட்). எடுத்துக்காட்டு: `vertical-spacing: 4`.
`white-space`	உரைக்கான வரி மடக்குதல் நடத்தை மாற்றவும். (மரபுரிமை)

எழுத்துரு-குடும்பம் உஉகுமொ க்குப் பயன்படுத்தப்படுவது போல (குறைவடையும்) பெயர்களின் பட்டியல் அல்ல, ஒரே ஒரு எழுத்துரு பெயராக இருக்க முடியும்.
எழுத்துரு அளவு ஒரு எண் அல்லது [CSS முழுமையான-அளவு மதிப்புகள்] (https://drafts.csswg.org/css-fonts-3/#font-size-prop) இருக்கலாம். எக்ச்-ச்மால், சிறிய, நடுத்தர, பெரிய மற்றும் எக்ச்-லார்ச் மதிப்புகள் மட்டுமே ஆதரிக்கப்படுகின்றன.

வரைதல் மற்றும் இடைவெளி¶

`border-radius`	செவ்வகங்களுக்கான ஆரம்: `border-radius: 4`.
`dash-style`	கோடு கோடுகளுக்கான நடை: `dash-style: 7 5`.
`justify-content`	பெட்டிகளுக்கான உள்ளடக்க சீரமைப்பு. ஒன்று `start`, `and`, `center` அல்லது `stretch`.
`line-style`	ஒன்று `normal` or `sloppy [factor]`.
`line-width`	வரிகளுக்கு அகலத்தை அமைக்கவும்: `line-width: 2`. (மரபுரிமை)
`min-height`	ஒரு உருப்படிக்கு குறைந்தபட்ச உயரத்தை அமைக்கவும்: `min-height: 50`.
`min-width`	ஒரு பொருளுக்கு குறைந்தபட்ச அகலத்தை அமைக்கவும்: `min-width: 100`.
`max-width`	அதிகபட்ச அகலத்தை அமைக்கவும் (உரை புலங்கள் மட்டும்): `max-width: 100`.
`padding`	சிஎச்எச் பாணி திணிப்பு (மேல், வலது, கீழ், இடது). எடுத்துக்காட்டு: `padding: 3 4`.

திணிப்பு 1 முதல் 4 வரம்பில் உள்ள முழு எண்களால் வரையறுக்கப்படுகிறது. எந்த அலகு (px, pt, em) பயன்படுத்த வேண்டியதில்லை. அனைத்து மதிப்புகளும் படப்புள்ளி தூரத்தில் உள்ளன.
டாச்-ச்டைல் என்பது எண்களின் பட்டியல் (வரி, இடைவெளி, வரி, இடைவெளி,…)
வரி-பாணி ஒரு வரைபடம் இல் வரையறுக்கப்படும்போது மட்டுமே ஒரு விளைவைக் கொண்டிருக்கும். -2 முதல் 2 வரையிலான வரம்பில் ஒரு மந்தமான காரணி வழங்கப்படலாம்.

போலி கூறுகள்¶

தற்போது, :: பிறகு போலி உறுப்பு மட்டுமே ஆதரிக்கப்படுகிறது.

content

உரைக்குப் பிறகு காண்பிக்கப்பட வேண்டிய கூடுதல் உள்ளடக்கம்.

மாறிகள்¶

காஃபோர் 2.16.0 முதல் உங்கள் பாணியிலான தாள்களில் நீங்கள் CSS மாறிகள் ஐப் பயன்படுத்தலாம்.

இது பெரும்பாலும் பயன்படுத்தப்பட்ட மதிப்புகளை மிகவும் பொதுவான முறையில் வரையறுக்க உங்களை அனுமதிக்கிறது. வரி கோடு பாணி மற்றும் வண்ணங்கள் போன்ற விசயங்களைப் பற்றி சிந்தியுங்கள்.

Var () செயல்பாடு சில வரம்புகளைக் கொண்டுள்ளது:

மதிப்புகள் இயல்புநிலை மதிப்பைக் கொண்டிருக்க முடியாது.
மாறிகள் அவற்றின் மதிப்பாக ஒரு மாறியைக் கொண்டிருக்க முடியாது.

எடுத்துக்காட்டு:

diagram {
  --bg-color: whitesmoke;
  background-color: var(--bg-color);
}

diagram[diagramType=sd] {
  --bg-color: rgb(200, 200, 255);
}

அனைத்து வரைபடங்களும் வெள்ளை பின்னணியைக் கொண்டுள்ளன. வரிசை வரைபடங்கள் நீல-இச் பின்னணியைப் பெறுகின்றன.

ஊடக வினவல்கள்¶

கஃபர் 2.16.0 முதல் இருண்ட மற்றும் ஒளி பயன்முறையை ஆதரிக்கிறது. இருண்ட மற்றும் ஒளி வண்ணத் திட்டங்கள் திரையில் திருத்துதல் பிரத்தியேகமாகப் பயன்படுத்தப்படுகின்றன. படங்களை ஏற்றுமதி செய்யும் போது, இயல்புநிலை வண்ணத் திட்டம் மட்டுமே பயன்படுத்தப்படுகிறது. வண்ணத் திட்டங்களை @மீடியா வினவல்களுடன் வரையறுக்கலாம். அதிகாரி விரும்புகிறது-வண்ணம் = இருண்ட வினவல் ஆதரிக்கப்படுகிறது, அத்துடன் மிகவும் வசதியான இருண்ட-முறை.

/* The background you see in exported diagrams: */
diagram {
  background-color: transparent;
}

/* Use a slightly grey background in the editor: */
@media light-mode {
  diagram {
    background-color: #e1e1e1;
  }
}

/* And anthracite a slightly grey background in the editor: */
@media dark-mode {
  diagram {
    background-color: #393D47;
  }
}

வரைபடம் பாணிகள்¶

ஒரு வரைபடத்தில் ஒரு சில பண்புகளை மட்டுமே வரையறுக்க முடியும், அதாவது பின்னணி-வண்ணம் மற்றும் வரி-பாணி. வரைபட பாணியை வரைபடம் உருப்படி பாணிகளிலிருந்து தனித்தனியாக வரையறுக்கிறீர்கள். அந்த வகையில் வரைபடங்களுக்கான பின்னணி நிறத்தை குறிப்பாக அமைக்க முடியும். வரி பாணி சாதாரண நேர் கோடுகள் அல்லது மிகவும் விளையாட்டுத்தனமான "சேறும் சகதியுமான பாணியாக இருக்கலாம். சேறும் சகதியுமான பாணிக்கு, வரி வோப்னெச் அளவை அமைக்க ஒரு விருப்பமான வொப்ளினச் காரணி வழங்கப்படலாம். 0.5 இயல்புநிலை, 0.0 ஒரு நேர் கோடு. மதிப்பு -2.0 முதல் 2.0 வரை இருக்க வேண்டும். 0.0 மற்றும் 0.5 க்கு இடையிலான மதிப்புகள் நுட்பமான விளைவை ஏற்படுத்துகின்றன.

சிஎச்எச் மாதிரி கூறுகள்¶

கஃபர் பல மாதிரி கூறுகளைக் கொண்டுள்ளது. எந்த உருப்படியை வடிவமைக்க வேண்டும் என்பதை நீங்கள் எவ்வாறு கண்டுபிடிப்பது?

கஃபர் மாதிரியில் உள்ள கூறுகளை மட்டுமே பாணியில் வைத்திருக்கிறது, எனவே நீங்கள் அவர்களின் பெயர்களில் வெளிப்படையாக இருக்க வேண்டும். எடுத்துக்காட்டாக: கூறு யுஎம்எல் மாதிரியில் வகுப்பு இலிருந்து பெறுகிறது, ஆனால் வகுப்பிற்கான வண்ணத்தை மாற்றுவது கூறுக்கு` அதை மாற்றாது.

கருவிப்பெட்டி (கீழ்-இடது பிரிவு) நீங்கள் ஒரு பொத்தானை நோக்கிச் சென்றால், உருப்படியின் பெயர் மற்றும் குறுக்குவழியுடன் ஒரு பாப்அப் தோன்றும். ஒரு பொதுவான விதியாக, நீங்கள் கூறுகளின் பெயரைப் பயன்படுத்தலாம், இது ச்டைல்சீட்டில் பெயராக ஒன்றாக ஒட்டப்படுகிறது. A * கூறு * component, * வழக்கை * usecase எனக் குறிப்பிடலாம். பெயர் பொருத்தம் என்பது வழக்கு உணர்வற்றது. சிஎச்எச் பெயர்கள் இயல்புநிலையாகச் சிறிய விசயத்தில் எழுதப்பட்டுள்ளன.

இருப்பினும், சிஎச்எச் உறுப்பு பெயர்கள் காஃபருக்குள் பயன்படுத்தப்படும் பெயர்களிடமிருந்து பெறப்பட்டவை என்பதால், சில விதிவிலக்குகள் உள்ளன.

சுயவிவரம்	குழு	தனிமம்	சிஎச்எச் உறுப்பு
*	*	உறுப்பு பெயர்	இடைவெளிகள் இல்லாத உறுப்பு பெயர் எ.கா. `class`, `usecase`.
ஒகுமொ	வகுப்புகள்	அனைத்து சங்கங்கள்	`association`
ஒகுமொ	கூறுகள்	சாதனம்/முனை	`node`
ஒகுமொ	செயல்கள்	முடிவு/ஒன்றிணைத்தல் முனை	`decisionnode`
ஒகுமொ	செயல்கள்	முட்கரண்டி/சேர முனை	`forknode`
ஒகுமொ	செயல்கள்	நீச்சல்	`partition`
ஒகுமொ	இடைவினைகள்	பிரதிபலிப்பு செய்தி	`message`
ஒகுமொ	மாநிலங்கள்	ஆரம்ப போலிநிலை	`psuedostate`
ஒகுமொ	மாநிலங்கள்	வரலாறு சூடோச்டேட்	`psuedostate`
ஒகுமொ	தன்விவரங்கள்	உருவகவகுப்பு	`class`
சி4 மாதிரி	சி4 மாதிரி	ஆள்	`c4person`
சி4 மாதிரி	சி4 மாதிரி	மென்பொருள் அமைப்பு	`c4container[type="மென்பொருள் அமைப்பு"]`
சி4 மாதிரி	சி4 மாதிரி	கூறு	`c4container[type="கூறு"]`
சி4 மாதிரி	சி4 மாதிரி	சரக்குப் பெட்டகம்	`c4container[type="கொள்கலன்"]`
சி4 மாதிரி	சி4 மாதிரி	கொள்கலன்: தரவுத்தளம்	`c4database`
முறைமைமமொ	தொகுதிகள்	மதிப்புவகை	`datatype`
முறைமைமமொ	தொகுதிகள்	தொடக்கநிலை	`datatype`
முறைமைமமொ	தேவைகள்	பெறப்பட்ட தேவை	`derivedreq`
ராகுமொ	எப்டிஎ	ஏதேனும் மற்றும்/அல்லது/… வாயில்	`and`, `or`, முதலியன.

சிந்தனைகள்¶

ஒரு வண்ணம் அல்லது எழுத்துருவை மாற்றுவதற்கு அப்பாற்பட்ட சில சிந்தனைகள் இங்கே. பயனர்களுக்கு கூடுதல் தகவல்களை வெளிப்படுத்த பின்வரும் எடுத்துக்காட்டுகளுடன், காஃபரின் மாதிரி கட்டமைப்பை நாங்கள் தோண்டி எடுக்கிறோம்.

உங்கள் சொந்த வெளிப்பாட்டை உருவாக்க நீங்கள் கன்சோலைப் பயன்படுத்த விரும்பலாம் ( → கருவிகள் → கன்சோல்). Gitter இல் ஒரு வரியை எங்களுக்கு விடுங்கள், நாங்கள் உங்களுக்கு உதவ மகிழ்ச்சியாக இருப்போம்.

வரைவுகள் தொகுப்பு¶

"வரைவுகள்" என்ற தொகுப்பில் உள்ள அனைத்து வரைபடங்களும் சேறும் சகதியுமான வரிகளைப் பயன்படுத்தி வரையப்பட வேண்டும்:

diagram[owner.name=drafts] {
  line-style: sloppy 0.3;
}

diagram[owner.name=drafts] * {
  font-family: Purisa; /* Or use some other font that's installed on your system */
}

நீண்ட பண்புக்கூறுகள், செயல்பாடுகள் மற்றும் ச்டீரியோடைப் மதிப்புகளை மடிக்கவும்¶

சில நேரங்களில் பண்புக்கூறு மதிப்புகள் கொஞ்சம் நீளமாகப் பெறுகின்றன. இயல்பாக, காஃபர் உரையை மடிக்காது. நீங்கள் விரும்பினால், வகுப்புகளில் நீண்ட பண்புகளுக்கு உரையை மடிக்க இந்த சிறிய துணுக்குகளைச் சேர்க்கலாம். இதை நீங்கள் மற்ற வகைகளுக்கும் பயன்படுத்தலாம்.

class * {
 white-space: normal;
}

இணைக்கப்படாத உறவுகள்¶

ஒரு மாதிரி உறுப்பால் ஆதரிக்கப்படாத வரைபடத்தில் உள்ள அனைத்து உருப்படிகளும் அடர் சிவப்பு நிறத்தில் வரையப்பட வேண்டும். பொதுமைப்படுத்தல், செயல்படுத்தல் மற்றும் சார்பு போன்ற இணைக்கப்பட்ட உறவுகளைக் கண்டறிய இது பயன்படுத்தப்படலாம். இரண்டு வரி முனைகளையும் இணைத்தவுடன் மட்டுமே இந்த உருப்படிகள் ஒரு மாதிரி உறுப்பு மூலம் ஆதரிக்கப்படும். இந்த விதி கோடுகள் மற்றும் பெட்டிகள் போன்ற எளிய கூறுகளை விலக்கும், இது ஒருபோதும் பின்னணி மாதிரி உறுப்பு இருக்காது.

:not(:is(:root, line, box, ellipse, commentline))[subject=""] {
  color: firebrick;
}

செல்லக்கூடிய சங்கங்கள்¶

ஒரு செல்லக்கூடிய சங்கத்திற்கு ஒரு பாணியை எவ்வாறு பயன்படுத்துவது என்பதற்கான எடுத்துக்காட்டு, எந்தவொரு முனைகளும் செல்லமுடியாது என்றால் ஒரு சங்க நீல நிறத்தை வண்ணமயமாக்குவது. இந்த வண்ணம் ஒரு மாதிரிக்கான சரிபார்ப்பு விதியாக செயல்படக்கூடும், அங்கு ஒவ்வொரு சங்கத்தின் குறைந்தது ஒரு முனையாவது செல்லக்கூடியதாக இருக்க வேண்டும். காஃபரின் தரவு மாதிரியை உருவாக்கப் பயன்படுத்தப்படும் மாதிரி கோப்பிற்கு இது உண்மையில் பொருந்தும்.

association:not([memberEnd.navigability*=true]) {
  color: blue;
}

திட கட்டுப்பாட்டு ஓட்ட கோடுகள்¶

Gaphor இல், கட்டுப்பாட்டு ஓட்டக் கோடுகள் SysML ச்டைலிங்: கோடு. நீங்கள் விரும்பினால், அல்லது அதிகாரப்பூர்வ யுஎம்எல் விவரக்குறிப்புகளை கண்டிப்பாக பின்பற்ற வேண்டும் என்றால், நீங்கள் அந்த திடமான வரிகளை உருவாக்கலாம்.

controlflow {
  dash-style: 0;
}

செய்யவேண்டிய குறிப்பு சிறப்பம்சமாக¶

"செய்யவேண்டிய" என்ற சொற்றொடருடன் தொடங்கும் அனைத்து கருத்துகளையும் வேறு பயனர் குறிப்பிட்ட நிறத்தில் முன்னிலைப்படுத்தலாம். வரைபடத்தை இறுதி செய்ய நீங்கள் சில கூடுதல் வேலைகளைச் செய்ய வேண்டும் என்பதை நீங்களே அறிந்து கொள்ள இது பயன்படுத்தப்படலாம்.

comment[body^="TODO"] {
  background-color: skyblue;
}

சுருக்க வகுப்புகள் மற்றும் செயல்பாடுகளை வலியுறுத்துங்கள்¶

பயன்படுத்தப்படும் சாய்வு எழுத்துரு கான்கிரீட் மற்றும் சுருக்க வகுப்புகள் அல்லது செயல்பாடுகளுக்கு இடையில் வேறுபடுவதற்கு போதுமானதாக இல்லை. இந்த வேலையைச் செய்ய, ஐசாப்ச்ட்ராக்ட் பண்புக்கூறு உறுப்பில் அமைக்கப்பட்டுள்ளதா என்பதை நாங்கள் சரிபார்க்கிறோம்:

:is(name, operation)[isabstract]::after {
  content: " {abstract}"
}

கணினி நடை தாள்¶

/* Gaphor diagram style sheet */

* {
  --opaque-background-color: white;
  background-color: transparent;
}

:not(diagramframe):drop {
  color: #1a5fb4;
  line-width: 3;
}

:disabled {
  opacity: 0.5;
}

@media light-mode {
  * {
    --opaque-background-color: #fafafa;
  }
}

@media dark-mode {
  * {
    --opaque-background-color: #242424;
    color: white;
  }

  :drop {
    color: #62a0ea;
  }
}

:root {
  color: black;
  font-family: sans;
  font-size: 14 ;
  line-width: 2;
  padding: 0;
}

diagramframe {
  justify-content: start;
}

:is(:root, diagramframe) > pentagon {
  line-width: 1;
  background-color: var(--opaque-background-color);
}

:is(:root, diagramframe) > pentagon > diagramtype {
  font-weight: bold;
  padding: 4 0 4 4;
}

:is(:root, diagramframe) > pentagon > stereotypes {
  padding: 4 0 4 4;
}

:is(:root, diagramframe) > pentagon > name {
  padding: 4;
}

/* Relationships */

commentline,
c4dependency,
dependency,
interfacerealization,
include,
extend,
packageimport,
lifetime,
satisfy,
derivereqt,
trace,
verify,
refine {
 dash-style: 7 5;
}

dependency[on_folded_interface = true],
interfacerealization[on_folded_interface = true] {
  dash-style: 0;
}

/* General */

comment {
  text-align: left;
  vertical-align: top;
  padding: 4 16 4 4;
}

comment stereotypes {
  text-align: center;
}

comment body {
  padding: 0;
}

diagram > icon {
  padding: 4;
  border-radius: 4;
}

diagram > type {
  font-weight: bold;
}

metadata {
  justify-content: stretch;
  text-align: left;
}

metadata cell {
  padding: 4;
}

metadata heading {
  font-weight: bold;
  font-style: normal;
  font-size: small;
}

pentagon {
  padding: 4;
  justify-content: start;
  text-align: left;
}

/* UML */

controlflow {
  dash-style: 9 3;
}

objectnode > icon {
  padding: 4 12;
}

decisionnode > type {
  font-size: small;
}

proxyport > icon,
activityparameternode,
executionspecification {
  background-color: var(--opaque-background-color);
}

partition {
  padding: 4 12 4 12;
  justify-content: stretch;
}

package {
  padding: 24 12 4 12;
}

interaction {
  justify-content: start;
}

activity {
  padding: 4 12;
  border-radius: 20;
  justify-content: start;
}

activityparameternode {
  padding: 4 12;
  min-width: 120;
  text-align: center;
}

action,
valuespecificationaction {
  padding: 4 12;
  border-radius: 15;
}

callbehavioraction {
  padding: 4 24 4 12;
  border-radius: 15;
}

sendsignalaction {
  padding: 4 24 4 12;
}

accepteventaction {
  padding: 4 12 4 24;
}

usecase {
  padding: 4;
}

swimlane {
  min-width: 150;
  padding: 4 12 4 12;
  justify-content: start;
  white-space: normal;
}

association > end {
  font-size: x-small;
  padding: 4;
}

/* SysML */

requirement {
  justify-content: start;
}

requirement text {
  white-space: normal;
}

directedrelationshippropertypath {
  dash-style: 7 5;
}

/* Classifiers */

compartment:first-child {
  padding: 12 4;
}

compartment + compartment {
  padding: 4;
  min-height: 8;
  text-align: left;
  justify-content: start;
  white-space: nowrap;
}

artifact compartment:first-child,
component compartment:first-child {
  padding: 12 24 12 4;
}

state compartment:first-child {
  padding: 4;
}

:has(.item),
:has(compartment + compartment),
:has(regions) {
  justify-content: start;
}

regions {
  justify-content: stretch;
}

region {
  padding: 4;
  min-height: 100;
  justify-content: start;
  text-align: left;
}

region + region {
  dash-style: 7 3;
}

and name,
xor name,
intermediateevent name,
dormantevent name,
basicevent name,
houseevent name,
topevent name,
inhibit name,
conditionalevent name,
zeroevent name,
or name,
not name,
transferin name,
transferout name,
undevelopedevent name,
seq name,
majorityvote name,
unsafecontrolaction name,
operationalsituation name,
controlaction name,
interfaceblock name,
block name,
property name,
requirement name,
c4person name,
c4database name,
c4container name,
package name,
enumeration name,
interface name,
class name,
datatype name,
component name,
statemachine name,
usecase name,
actor name,
artifact name,
node name {
  font-weight: bold;
}

name[isabstract] {
  font-style: italic;
}

from {
  font-size: x-small;
}

activity > :is(name, stereotypes) {
  text-align: left;
}

compartment heading {
  padding: 0 0 4 0;
  font-size: x-small;
  font-style: italic;
  text-align: center;
}

operation[isabstract] {
  font-style: italic;
}

attribute[isstatic],
operation[isstatic] {
  text-decoration: underline;
}

property:not([aggregation="composite"]) {
  dash-style: 7 5;
}

/* Attached */

:has(icon)[connected_side] {
  text-align: right;
  vertical-align: top;
}

:has(icon)[connected_side="left"] {
  text-align: left;
}

:has(icon)[connected_side="bottom"] {
  vertical-align: bottom;
}

/* C4 model */

c4container, c4person {
  padding: 4 4 4 4;
}

c4database {
  padding: 20 4 4 4;
}

:is(c4container, c4database, c4person):has(.item) {
  justify-content: end;
}

:is(c4container, c4database, c4person):has(.item) > :is(name, technology) {
  text-align: left;
}

c4dependency name {
  max-width: 150;
}

:is(c4container, c4database, c4dependency, c4person) technology {
  font-size: x-small;
}

:is(c4container, c4database, c4person) description {
  padding: 4 4 0 4;
}